<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Documentation - Metronic Admin Dashboard Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />    
    <link href="assets/google-code-prettify/prettify.css" rel="stylesheet" />
    <link href="assets/css/docs.css" rel="stylesheet" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.png" />
    <style>
     .pluginwrap { display:none; } 
      .pluginwrapActive { display:block; }
    </style>
  </head>
  <body>
    <!-- Subhead
    ================================================== -->
    <header class="jumbotron subhead">
      <div class="container container-narrow">
        <h1>Metronic - Admin Dashboard Template</h1>
        <p class="lead">Documentation For Metronic Version 2.0.2</p>
      </div>
    </header>
      
    <div class="container">

      <div class="row">
        <div class="span12">
            <div class="well intro-text">
                  <h3>Thank You For Purchasing Metronic, One of Our Premium Items!</h3>
                  <p>
                    If you have any questions that are beyond the scope of this help file, please email our support 
                    <a href="mailto:support@keenthemes.com">support@keenthemes.com</a>.
                  </p>
            </div>  
        </div> 
      </div> 

      <div class="row" style="margin-top:20px;margin-bottom:20px">
          <div class="span12">
              <table class="table table-bordered table-striped">
               <tbody>
                  <tr>
                    <td width="50%">
                      <ul class="menu">
                        <h4>Overview</h4>
                        <p>
                          Metronic is a responsive and multipurpose admin and frontend theme powered with <a href="http://getbootstrap.com" target="_blank">Twitter Bootstrap 3.1.1 Framework</a>. Metronic can be used for any type of web applications: custom admin panels, admin dashboards, CMS, CRM, SAAS and websites: business, corporate, portfolio, blog. Metronic has a sleek, clean and intuitive metro style design which makes your next project look awesome and yet user friendly. Metronic has a huge collection of plugins and UI components and works seamlessly on all major web browsers, tablets and phones.
                        </p>
                        <p>

We put a lot of love and effort to make Metronic a useful tool for everyone and now Metronic comes with 4 complete themes: Metronic Admin, Metronic Admin RTL Version, Metronic Frontend and Metronic Frontend RTL Version.
</p>
<P>

We are keen to release continuous long term updates and dozens of new features will be coming soon in the future releases. Once you purchased Metronic, you will be entitled to free download of all future updates for the same license.
</P>
                        <hr>
                        <p>
                          Author: <a href="http://www.keenthemes.com" target="_blank">KeenThemes</a><br>
                          Contact: <a href="mailto:support@keenthemes.com">support@keenthemes.com</a><br>
                          Created On: 13/02/2013<br>
                          Updated On: 20/02/2014<br>
                        </p>
                         <hr> 
                        <a class="btn btn-success" target="_blank" href="http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469">
                          Live Preview 
                        </a>
                         <a class="btn btn-success" target="_blank" href="http://themeforest.net/user/keenthemes/portfolio">
                          Other Themes <i class="icon-share-alt icon-white"></i>
                        </a>
                      </ul>
                    </td>
                    <td width="50%">
                      <h4>Table of Contents:</h4>
                      <ul class="menu">
                        <li><a href="javascript:;" class="clickable" data-section="#overview">1. Overview</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#template_structure">2. Template Structure</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#font">3. Fonts</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#theme_config">4. Theme & Layout Configuration</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#top_menu">5. Top Menu</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#main_menu">6. Main Menu</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#new_page">7. New Page</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#buttons">8. Buttons</a></li>                        
                        <li><a href="javascript:;" class="clickable" data-section="#init">9. Javascript Initialization</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#extend">10. Coding & Extending</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#plugins">11. Javascript Plugins & Resources</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#references">12. References</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#log">13. Change Log</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#upgrade">14. Upgrade</a></li>
                        <li><a href="javascript:;" class="clickable" data-section="#end">15. End of Documentation</a></li>
                      </ul>
                    </td>  
                  </tr>
                </tbody>
              </table>
          </div> 
      </div> 

       <div class="row">
        <div class="span12">
          <section id="template_structure">
            <div class="page-header">
              <h1>2. Template Structure</h1>
               <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
            </div>
            <p>
               All template files have fixed structure consisting of <code>header</code>, <code>top menu</code>, <code>main menu</code>, <code>content</code> and <code>footer</code> as shown below:
            </p>
            <img src="assets/i/layout.jpg">
            <h3>
            Beginning of Page  
            </h3>
            <p>
              Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version 
              and set a spesific class applied to Internet Explorer versions.
            </p>
            <pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;!--[if IE 8]&gt; &lt;html lang=&quot;en&quot; class=&quot;ie8&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if IE 9]&gt; &lt;html lang=&quot;en&quot; class=&quot;ie9&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if !IE]&gt;&lt;!--&gt; &lt;html lang=&quot;en&quot;&gt; &lt;!--&lt;![endif]--&gt;
</pre>  

<h3>Page Head</h3>
<p>
Page head contains metadata, javascript and css files:
</p>
<pre class="prettyprint linenums">
&lt;head&gt;
   &lt;meta charset=&quot;utf-8&quot; /&gt;
   &lt;title&gt;Metronic | Admin Dashboard Template&lt;/title&gt;
   &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
   &lt;meta content=&quot;width=device-width, initial-scale=1.0&quot; name=&quot;viewport&quot; /&gt;
   &lt;meta content=&quot;&quot; name=&quot;description&quot; /&gt;
   &lt;meta content=&quot;&quot; name=&quot;author&quot; /&gt;
   
   &lt;!-- BEGIN GLOBAL MANDATORY STYLES --&gt;          
   &lt;link href=&quot;http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&amp;subset=all&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;link href=&quot;assets/plugins/font-awesome/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;link href=&quot;assets/plugins/bootstrap/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;link href=&quot;assets/plugins/uniform/css/uniform.default.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;!-- END GLOBAL MANDATORY STYLES --&gt;
   
   &lt;!-- BEGIN PAGE LEVEL PLUGIN STYLES --&gt; 
   &lt;link href=&quot;assets/plugins/gritter/css/jquery.gritter.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;link href=&quot;assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
   &lt;link href=&quot;assets/plugins/fullcalendar/fullcalendar/fullcalendar.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;link href=&quot;assets/plugins/jqvmap/jqvmap/jqvmap.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;link href=&quot;assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;!-- END PAGE LEVEL PLUGIN STYLES --&gt;

   &lt;!-- BEGIN THEME STYLES --&gt; 
   &lt;link href=&quot;assets/css/style-metronic.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;link href=&quot;assets/css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;link href=&quot;assets/css/style-responsive.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;link href=&quot;assets/css/plugins.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;link href=&quot;assets/css/pages/tasks.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;link href=&quot;assets/css/themes/default.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; id=&quot;style_color&quot;/&gt;
   &lt;link href=&quot;assets/css/custom.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
   &lt;!-- END THEME STYLES --&gt;

   &lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot; /&gt;
&lt;/head&gt;
</pre>  

<h3>Header</h3>
<p>
Header contains of logo and top menu bar and it used in all pages. HTML code of header container shown below:   
</p>
<pre class="prettyprint linenums">
&lt;!-- BEGIN HEADER --&gt;   
&lt;div class=&quot;header navbar navbar-inverse navbar-fixed-top&quot;&gt;
  &lt;!-- BEGIN TOP NAVIGATION BAR --&gt;
  &lt;div class=&quot;header-inner&quot;&gt;
    &lt;!-- BEGIN LOGO --&gt;  
    &lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;
    &lt;img src=&quot;assets/img/logo.png&quot; alt=&quot;logo&quot; class=&quot;img-responsive&quot; /&gt;
    &lt;/a&gt;
    &lt;!-- END LOGO --&gt;
    &lt;!-- BEGIN RESPONSIVE MENU TOGGLER --&gt; 
    &lt;a href=&quot;javascript:;&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot;&gt;
    &lt;img src=&quot;assets/img/menu-toggler.png&quot; alt=&quot;&quot; /&gt;
    &lt;/a&gt; 
    &lt;!-- END RESPONSIVE MENU TOGGLER --&gt;
    &lt;!-- BEGIN TOP NAVIGATION MENU --&gt;
    &lt;ul class=&quot;nav navbar-nav pull-right&quot;&gt;
      &lt;!-- BEGIN NOTIFICATION DROPDOWN --&gt;
      &lt;li class=&quot;dropdown&quot; id=&quot;header_notification_bar&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot;
          data-close-others=&quot;true&quot;&gt;
        &lt;i class=&quot;icon-warning-sign&quot;&gt;&lt;/i&gt;
        &lt;span class=&quot;badge&quot;&gt;6&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class=&quot;dropdown-menu extended notification&quot;&gt;
          &lt;li&gt;
            &lt;p&gt;You have 14 new notifications&lt;/p&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;label label-sm label-icon label-success&quot;&gt;&lt;i class=&quot;icon-plus&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                New user registered. 
                &lt;span class=&quot;time&quot;&gt;Just now&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;&lt;i class=&quot;icon-bolt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                Server #12 overloaded. 
                &lt;span class=&quot;time&quot;&gt;15 mins&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;label label-sm label-icon label-warning&quot;&gt;&lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                Server #2 not responding.
                &lt;span class=&quot;time&quot;&gt;22 mins&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;label label-sm label-icon label-info&quot;&gt;&lt;i class=&quot;icon-bullhorn&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                Application error.
                &lt;span class=&quot;time&quot;&gt;40 mins&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;&lt;i class=&quot;icon-bolt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                Database overloaded 68%. 
                &lt;span class=&quot;time&quot;&gt;2 hrs&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;&lt;i class=&quot;icon-bolt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                2 user IP blocked.
                &lt;span class=&quot;time&quot;&gt;5 hrs&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;label label-sm label-icon label-warning&quot;&gt;&lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                Storage Server #4 not responding.
                &lt;span class=&quot;time&quot;&gt;45 mins&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;label label-sm label-icon label-info&quot;&gt;&lt;i class=&quot;icon-bullhorn&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                System Error.
                &lt;span class=&quot;time&quot;&gt;55 mins&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;&lt;i class=&quot;icon-bolt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                Database overloaded 68%. 
                &lt;span class=&quot;time&quot;&gt;2 hrs&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class=&quot;external&quot;&gt;   
            &lt;a href=&quot;#&quot;&gt;See all notifications &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;!-- END NOTIFICATION DROPDOWN --&gt;
      &lt;!-- BEGIN INBOX DROPDOWN --&gt;
      &lt;li class=&quot;dropdown&quot; id=&quot;header_inbox_bar&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot;
          data-close-others=&quot;true&quot;&gt;
        &lt;i class=&quot;icon-envelope&quot;&gt;&lt;/i&gt;
        &lt;span class=&quot;badge&quot;&gt;5&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class=&quot;dropdown-menu extended inbox&quot;&gt;
          &lt;li&gt;
            &lt;p&gt;You have 12 new messages&lt;/p&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
              &lt;li&gt;  
                &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                &lt;span class=&quot;photo&quot;&gt;&lt;img src=&quot;./assets/img/avatar2.jpg&quot; alt=&quot;&quot;/&gt;&lt;/span&gt;
                &lt;span class=&quot;subject&quot;&gt;
                &lt;span class=&quot;from&quot;&gt;Lisa Wong&lt;/span&gt;
                &lt;span class=&quot;time&quot;&gt;Just Now&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;message&quot;&gt;
                Vivamus sed auctor nibh congue nibh. auctor nibh
                auctor nibh...
                &lt;/span&gt;  
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                &lt;span class=&quot;photo&quot;&gt;&lt;img src=&quot;./assets/img/avatar3.jpg&quot; alt=&quot;&quot;/&gt;&lt;/span&gt;
                &lt;span class=&quot;subject&quot;&gt;
                &lt;span class=&quot;from&quot;&gt;Richard Doe&lt;/span&gt;
                &lt;span class=&quot;time&quot;&gt;16 mins&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;message&quot;&gt;
                Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh
                auctor nibh...
                &lt;/span&gt;  
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                &lt;span class=&quot;photo&quot;&gt;&lt;img src=&quot;./assets/img/avatar1.jpg&quot; alt=&quot;&quot;/&gt;&lt;/span&gt;
                &lt;span class=&quot;subject&quot;&gt;
                &lt;span class=&quot;from&quot;&gt;Bob Nilson&lt;/span&gt;
                &lt;span class=&quot;time&quot;&gt;2 hrs&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;message&quot;&gt;
                Vivamus sed nibh auctor nibh congue nibh. auctor nibh
                auctor nibh...
                &lt;/span&gt;  
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                &lt;span class=&quot;photo&quot;&gt;&lt;img src=&quot;./assets/img/avatar2.jpg&quot; alt=&quot;&quot;/&gt;&lt;/span&gt;
                &lt;span class=&quot;subject&quot;&gt;
                &lt;span class=&quot;from&quot;&gt;Lisa Wong&lt;/span&gt;
                &lt;span class=&quot;time&quot;&gt;40 mins&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;message&quot;&gt;
                Vivamus sed auctor 40% nibh congue nibh...
                &lt;/span&gt;  
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;inbox.html?a=view&quot;&gt;
                &lt;span class=&quot;photo&quot;&gt;&lt;img src=&quot;./assets/img/avatar3.jpg&quot; alt=&quot;&quot;/&gt;&lt;/span&gt;
                &lt;span class=&quot;subject&quot;&gt;
                &lt;span class=&quot;from&quot;&gt;Richard Doe&lt;/span&gt;
                &lt;span class=&quot;time&quot;&gt;46 mins&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;message&quot;&gt;
                Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh
                auctor nibh...
                &lt;/span&gt;  
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class=&quot;external&quot;&gt;   
            &lt;a href=&quot;inbox.html&quot;&gt;See all messages &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;!-- END INBOX DROPDOWN --&gt;
      &lt;!-- BEGIN TODO DROPDOWN --&gt;
      &lt;li class=&quot;dropdown&quot; id=&quot;header_task_bar&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
        &lt;i class=&quot;icon-tasks&quot;&gt;&lt;/i&gt;
        &lt;span class=&quot;badge&quot;&gt;5&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class=&quot;dropdown-menu extended tasks&quot;&gt;
          &lt;li&gt;
            &lt;p&gt;You have 12 pending tasks&lt;/p&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;task&quot;&gt;
                &lt;span class=&quot;desc&quot;&gt;New release v1.2&lt;/span&gt;
                &lt;span class=&quot;percent&quot;&gt;30%&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;progress&quot;&gt;
                &lt;span style=&quot;width: 40%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;40&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                &lt;span class=&quot;sr-only&quot;&gt;40% Complete&lt;/span&gt;
                &lt;/span&gt;
                &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;task&quot;&gt;
                &lt;span class=&quot;desc&quot;&gt;Application deployment&lt;/span&gt;
                &lt;span class=&quot;percent&quot;&gt;65%&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;progress progress-striped&quot;&gt;
                &lt;span style=&quot;width: 65%;&quot; class=&quot;progress-bar progress-bar-danger&quot; aria-valuenow=&quot;65&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                &lt;span class=&quot;sr-only&quot;&gt;65% Complete&lt;/span&gt;
                &lt;/span&gt;
                &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;task&quot;&gt;
                &lt;span class=&quot;desc&quot;&gt;Mobile app release&lt;/span&gt;
                &lt;span class=&quot;percent&quot;&gt;98%&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;progress&quot;&gt;
                &lt;span style=&quot;width: 98%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;98&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                &lt;span class=&quot;sr-only&quot;&gt;98% Complete&lt;/span&gt;
                &lt;/span&gt;
                &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;task&quot;&gt;
                &lt;span class=&quot;desc&quot;&gt;Database migration&lt;/span&gt;
                &lt;span class=&quot;percent&quot;&gt;10%&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;progress progress-striped&quot;&gt;
                &lt;span style=&quot;width: 10%;&quot; class=&quot;progress-bar progress-bar-warning&quot; aria-valuenow=&quot;10&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                &lt;span class=&quot;sr-only&quot;&gt;10% Complete&lt;/span&gt;
                &lt;/span&gt;
                &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;task&quot;&gt;
                &lt;span class=&quot;desc&quot;&gt;Web server upgrade&lt;/span&gt;
                &lt;span class=&quot;percent&quot;&gt;58%&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;progress progress-striped&quot;&gt;
                &lt;span style=&quot;width: 58%;&quot; class=&quot;progress-bar progress-bar-info&quot; aria-valuenow=&quot;58&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                &lt;span class=&quot;sr-only&quot;&gt;58% Complete&lt;/span&gt;
                &lt;/span&gt;
                &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;task&quot;&gt;
                &lt;span class=&quot;desc&quot;&gt;Mobile development&lt;/span&gt;
                &lt;span class=&quot;percent&quot;&gt;85%&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;progress progress-striped&quot;&gt;
                &lt;span style=&quot;width: 85%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;85&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                &lt;span class=&quot;sr-only&quot;&gt;85% Complete&lt;/span&gt;
                &lt;/span&gt;
                &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;  
                &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;task&quot;&gt;
                &lt;span class=&quot;desc&quot;&gt;New UI release&lt;/span&gt;
                &lt;span class=&quot;percent&quot;&gt;18%&lt;/span&gt;
                &lt;/span&gt;
                &lt;span class=&quot;progress progress-striped&quot;&gt;
                &lt;span style=&quot;width: 18%;&quot; class=&quot;progress-bar progress-bar-important&quot; aria-valuenow=&quot;18&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
                &lt;span class=&quot;sr-only&quot;&gt;18% Complete&lt;/span&gt;
                &lt;/span&gt;
                &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class=&quot;external&quot;&gt;   
            &lt;a href=&quot;#&quot;&gt;See all tasks &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;!-- END TODO DROPDOWN --&gt;
      &lt;!-- BEGIN USER LOGIN DROPDOWN --&gt;
      &lt;li class=&quot;dropdown user&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
        &lt;img alt=&quot;&quot; src=&quot;assets/img/avatar1_small.jpg&quot;/&gt;
        &lt;span class=&quot;username&quot;&gt;Bob Nilson&lt;/span&gt;
        &lt;i class=&quot;icon-angle-down&quot;&gt;&lt;/i&gt;
        &lt;/a&gt;
        &lt;ul class=&quot;dropdown-menu&quot;&gt;
          &lt;li&gt;&lt;a href=&quot;extra_profile.html&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt; My Profile&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;page_calendar.html&quot;&gt;&lt;i class=&quot;icon-calendar&quot;&gt;&lt;/i&gt; My Calendar&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;inbox.html&quot;&gt;&lt;i class=&quot;icon-envelope&quot;&gt;&lt;/i&gt; My Inbox &lt;span class=&quot;badge badge-danger&quot;&gt;3&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-tasks&quot;&gt;&lt;/i&gt; My Tasks &lt;span class=&quot;badge badge-success&quot;&gt;7&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;javascript:;&quot; id=&quot;trigger_fullscreen&quot;&gt;&lt;i class=&quot;icon-move&quot;&gt;&lt;/i&gt; Full Screen&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;extra_lock.html&quot;&gt;&lt;i class=&quot;icon-lock&quot;&gt;&lt;/i&gt; Lock Screen&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;login.html&quot;&gt;&lt;i class=&quot;icon-key&quot;&gt;&lt;/i&gt; Log Out&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;!-- END USER LOGIN DROPDOWN --&gt;
    &lt;/ul&gt;
    &lt;!-- END TOP NAVIGATION MENU --&gt;
  &lt;/div&gt;
  &lt;!-- END TOP NAVIGATION BAR --&gt;
&lt;/div&gt;
&lt;!-- END HEADER --&gt;
</pre>

<h3>Sidebar</h3>
<p>
Sidebar contains of quick search form and main navigation menu. HTML code of sidebar container as shown below:   
</p>
<pre class="prettyprint linenums">
&lt;!-- BEGIN SIDEBAR --&gt;
&lt;div class=&quot;page-sidebar nav-collapse collapse&quot;&gt;
  &lt;!-- MAIN MENU GOES HERE.--&gt;
&lt;/div&gt;
&lt;!-- END SIDEBAR --&gt;
</pre>


<h3>Content</h3>
<p>
Content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below:   
</p>
<pre class="prettyprint linenums">
&lt;!-- BEGIN PAGE --&gt;
&lt;div class=&quot;page-content&quot;&gt;
    &lt;!-- BEGIN PAGE HEADER--&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-12&quot;&gt;
        &lt;!-- BEGIN PAGE TITLE &amp; BREADCRUMB--&gt;   
        &lt;h3 class=&quot;page-title&quot;&gt;
          Dashboard
          &lt;small&gt;statistics and more&lt;/small&gt;
        &lt;/h3&gt;
        &lt;ul class=&quot;page-breadcrumb breadcrumb&quot;&gt;
          &lt;li&gt;
            &lt;i class=&quot;icon-home&quot;&gt;&lt;/i&gt;
            &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt; 
            &lt;span class=&quot;icon-angle-right&quot;&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;!-- END PAGE TITLE &amp; BREADCRUMB--&gt; 
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- END PAGE HEADER--&gt;
    &lt;!-- CONTENT BODY GOES HERE >>>> --&gt;
&lt;/div&gt;      
&lt;!-- END PAGE --&gt;
</pre>

<h3>Footer</h3>
<pre class="prettyprint linenums">
&lt;!-- BEGIN FOOTER --&gt;
&lt;div class=&quot;footer&quot;&gt;
   &lt;div class=&quot;footer-inner&quot;&gt;
      2013 &amp;copy; Metronic by keenthemes.
   &lt;/div&gt;
   &lt;div class=&quot;footer-tools&quot;&gt;
      &lt;span class=&quot;go-top&quot;&gt;
      &lt;i class=&quot;icon-angle-up&quot;&gt;&lt;/i&gt;
      &lt;/span&gt;
   &lt;/div&gt;
&lt;/div&gt;
&lt;!-- END FOOTER --&gt;
</pre>

<h3>End Of Page(Javascripts)</h3>
<p>Javascript files loaded in the end of page. This will reduce page load time.</p>
<pre class="prettyprint linenums">
&lt;!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --&gt;
&lt;!-- BEGIN CORE PLUGINS --&gt;   
&lt;!--[if lt IE 9]&gt;
&lt;script src=&quot;assets/plugins/respond.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/excanvas.min.js&quot;&gt;&lt;/script&gt; 
&lt;![endif]--&gt;   
&lt;script src=&quot;assets/plugins/jquery-1.10.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jquery-migrate-1.2.1.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;   
&lt;!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --&gt;
&lt;script src=&quot;assets/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/bootstrap/js/bootstrap.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jquery.blockui.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  
&lt;script src=&quot;assets/plugins/jquery.cookie.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/uniform/jquery.uniform.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
&lt;!-- END CORE PLUGINS --&gt;
&lt;!-- BEGIN PAGE LEVEL PLUGINS --&gt;
&lt;script src=&quot;assets/plugins/jqvmap/jqvmap/jquery.vmap.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;   
&lt;script src=&quot;assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  
&lt;script src=&quot;assets/plugins/flot/jquery.flot.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/flot/jquery.flot.resize.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jquery.pulsate.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/bootstrap-daterangepicker/moment.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/bootstrap-daterangepicker/daterangepicker.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;     
&lt;script src=&quot;assets/plugins/gritter/js/jquery.gritter.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;!-- IMPORTANT! fullcalendar depends on jquery-ui-1.10.3.custom.min.js for drag &amp; drop support --&gt;
&lt;script src=&quot;assets/plugins/fullcalendar/fullcalendar/fullcalendar.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jquery.sparkline.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  
&lt;!-- END PAGE LEVEL PLUGINS --&gt;
&lt;!-- BEGIN PAGE LEVEL SCRIPTS --&gt;
&lt;script src=&quot;assets/scripts/app.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/scripts/index.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/scripts/tasks.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;        
&lt;!-- END PAGE LEVEL SCRIPTS --&gt;  
&lt;script&gt;
  jQuery(document).ready(function() {    
     App.init(); // initlayout and core plugins
     Index.init();
     Index.initJQVMAP(); // init index page's custom scripts
     Index.initCalendar(); // init index page's custom scripts
     Index.initCharts(); // init index page's custom scripts
     Index.initChat();
     Index.initMiniCharts();
     Index.initDashboardDaterange();
     Index.initIntro();
     Tasks.initDashboardWidget();
  });
&lt;/script&gt;
&lt;!-- END JAVASCRIPTS --&gt;
</pre>
                      
            <h3>HTML Code Comment Sample</h3>
            <p>
            All the html, css and javascript file contents have easy to refer and meaningful comments:
            </p> 
            <pre class="prettyprint linenums">&lt;!-- BEGIN LOGO --&gt;
&lt;a class=&quot;brand&quot; href=&quot;index.html&quot;&gt;
&lt;img src=&quot;assets/plugins/img/logo.png&quot; alt=&quot;logo&quot; /&gt;
&lt;/a&gt;
&lt;!-- END LOGO --&gt;
&lt;!-- BEGIN RESPONSIVE MENU TOGGLER --&gt;
&lt;a href=&quot;javascript:;&quot; class=&quot;btn-navbar collapsed&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.nav-collapse&quot;&gt;
&lt;img src=&quot;assets/plugins/img/menu-toggler.png&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;          
&lt;!-- END RESPONSIVE MENU TOGGLER --&gt;</pre>
  
          <h3>CSS Code Comment Sample</h3>
          <pre class="prettyprint linenums">
/***
Header and header elements.
***/
.header {
  padding: 0 !important;
  margin: 0 !important;
}

.header .brand {
  margin-top: -1px;
}
          </pre>  
          <h3>Javascript Code Comment Sample</h3>
          <pre class="prettyprint linenums">var initDrag = function (el) {
  // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
  // it doesn't need to have a start or end
  var eventObject = {
      title: $.trim(el.text()) // use the element's text as the event title
  };
  // store the Event Object in the DOM element so we can get to it later
  el.data('eventObject', eventObject);
  // make the event draggable using jQuery UI
}</pre>  
          </section>
        </div>
      </div>
    

        <div class="row">
          <div class="span12">
            <section id="font">
              <div class="page-header">
                <h1>3. Fonts</h1>
                 <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
              </div>
              <p>
                Metronic uses Open Sans font from google fonts. The font must be loaded in HTML heade before the rest of css files:</code>
              </p>
              <pre class="prettyprint linenums">
&lt;link href=&quot;http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&amp;subset=all&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;</pre>
            </section> 
          </div>  
        </div>  


        <div class="row">
          <div class="span12">
            <section id="theme_config">
              <div class="page-header">
                <h1>4. Theme & Layout Configuration</h1>
                 <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
              </div>

              <h3>Theme Setup</h3>
              <p>
                Metronic comes with 6 color themes, <code>default</code>, <code>blue</code>, <code>grey</code>, <code>brown</code>, <code>purple</code>, <code>light</code>.
                To setup a selected theme. Include <code>style/themes/[theme_name].css</code> in page head.
                For instance, if you like to use blue theme, include <code>style/themes/blue.css</code> css file. CSS file load order should be followed as shown below:
              </p>
<pre class="prettyprint linenums">
&lt;link href=&quot;assets/css/themes/default.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; id=&quot;style_color&quot;/&gt;
</pre> 

              <h3>Layout Settings</h3>
              <p>
              The best way to learn how to use Metronic's available layout options, please go to one of Metronic pages and use the "Theme Settings" panel located at the top right of the page.
              Choose you preferred layout options, and use <code>Chrome's Developer Tool</code> and <code>Firefox's Firebug Tool</code> to see the HTML code changes upon you select your layout combination.
              When you change the laypout option, mostly some css classes will be added into the page's body element. When you change the  layout settings only the most parent HTML elements will be modified, the page content part remains as it is.
              </p>

              <h3>Fixed Header & Footer On Mobile Devices</h3>
              <p>
              If fixed header or footer is set then by default these features will be disabled on mobile devices. To force the fixed header & footer on mobile devices 
              you will need to apply <code>page-footer-fixed page-footer-fixed-mobile</code> and <code>page-header-fixed page-header-fixed-mobile</code> classes to the HTML body element accordingly. 
              </p>

              <h3>Sidebar Menu Settings</h3>
              <p>
              By default the sidebar menu comes with <code>data-auto-scroll="true"</code> and <code>data-slide-speed="200"</code> settings. To disable the auto scrolling feature of the sidebar menu apply 
               <code>data-auto-scroll="false"</code> parameter to the sidebar menu's HTML tag(page-sidebar-menu). To change the submenu's slide speed apply a new value as <code>data-slide-speed="300"</code>.
              </p>
            </section> 
          </div>  
        </div>  

        <div class="row">
          <div class="span12">
            <section id="top_menu">
              <div class="page-header">
                <h1>5. Top Menu</h1>
                 <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
              </div>
              <p>
                Top menu enables an easy access to most frequently accessed information and pages.
              </p>  
              <img src="assets/i/top_menu_1.png" class="img-polaroid">
              <img src="assets/i/top_menu_2.jpg" class="img-polaroid">
            </i>
              <h3>Top Menu Dropdown Options</h3>              
              <pre class="prettyprint linenums">
&lt;!-- BEGIN TOP NAVIGATION MENU --&gt;
&lt;ul class=&quot;nav navbar-nav pull-right&quot;&gt;
  &lt;!-- BEGIN NOTIFICATION DROPDOWN --&gt;
  &lt;li class=&quot;dropdown&quot; id=&quot;header_notification_bar&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot;
      data-close-others=&quot;true&quot;&gt;
    &lt;i class=&quot;icon-warning-sign&quot;&gt;&lt;/i&gt;
    &lt;span class=&quot;badge&quot;&gt;6&lt;/span&gt;
    &lt;/a&gt;
    &lt;ul class=&quot;dropdown-menu extended notification&quot;&gt;
      &lt;li&gt;
        &lt;p&gt;You have 14 new notifications&lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;label label-sm label-icon label-success&quot;&gt;&lt;i class=&quot;icon-plus&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            New user registered. 
            &lt;span class=&quot;time&quot;&gt;Just now&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;&lt;i class=&quot;icon-bolt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            Server #12 overloaded. 
            &lt;span class=&quot;time&quot;&gt;15 mins&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;label label-sm label-icon label-warning&quot;&gt;&lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            Server #2 not responding.
            &lt;span class=&quot;time&quot;&gt;22 mins&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;label label-sm label-icon label-info&quot;&gt;&lt;i class=&quot;icon-bullhorn&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            Application error.
            &lt;span class=&quot;time&quot;&gt;40 mins&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;&lt;i class=&quot;icon-bolt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            Database overloaded 68%. 
            &lt;span class=&quot;time&quot;&gt;2 hrs&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;&lt;i class=&quot;icon-bolt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            2 user IP blocked.
            &lt;span class=&quot;time&quot;&gt;5 hrs&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;label label-sm label-icon label-warning&quot;&gt;&lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            Storage Server #4 not responding.
            &lt;span class=&quot;time&quot;&gt;45 mins&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;label label-sm label-icon label-info&quot;&gt;&lt;i class=&quot;icon-bullhorn&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            System Error.
            &lt;span class=&quot;time&quot;&gt;55 mins&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;label label-sm label-icon label-danger&quot;&gt;&lt;i class=&quot;icon-bolt&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            Database overloaded 68%. 
            &lt;span class=&quot;time&quot;&gt;2 hrs&lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class=&quot;external&quot;&gt;   
        &lt;a href=&quot;#&quot;&gt;See all notifications &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;!-- END NOTIFICATION DROPDOWN --&gt;
  &lt;!-- BEGIN INBOX DROPDOWN --&gt;
  &lt;li class=&quot;dropdown&quot; id=&quot;header_inbox_bar&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot;
      data-close-others=&quot;true&quot;&gt;
    &lt;i class=&quot;icon-envelope&quot;&gt;&lt;/i&gt;
    &lt;span class=&quot;badge&quot;&gt;5&lt;/span&gt;
    &lt;/a&gt;
    &lt;ul class=&quot;dropdown-menu extended inbox&quot;&gt;
      &lt;li&gt;
        &lt;p&gt;You have 12 new messages&lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
          &lt;li&gt;  
            &lt;a href=&quot;inbox.html?a=view&quot;&gt;
            &lt;span class=&quot;photo&quot;&gt;&lt;img src=&quot;./assets/img/avatar2.jpg&quot; alt=&quot;&quot;/&gt;&lt;/span&gt;
            &lt;span class=&quot;subject&quot;&gt;
            &lt;span class=&quot;from&quot;&gt;Lisa Wong&lt;/span&gt;
            &lt;span class=&quot;time&quot;&gt;Just Now&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;message&quot;&gt;
            Vivamus sed auctor nibh congue nibh. auctor nibh
            auctor nibh...
            &lt;/span&gt;  
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;inbox.html?a=view&quot;&gt;
            &lt;span class=&quot;photo&quot;&gt;&lt;img src=&quot;./assets/img/avatar3.jpg&quot; alt=&quot;&quot;/&gt;&lt;/span&gt;
            &lt;span class=&quot;subject&quot;&gt;
            &lt;span class=&quot;from&quot;&gt;Richard Doe&lt;/span&gt;
            &lt;span class=&quot;time&quot;&gt;16 mins&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;message&quot;&gt;
            Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh
            auctor nibh...
            &lt;/span&gt;  
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;inbox.html?a=view&quot;&gt;
            &lt;span class=&quot;photo&quot;&gt;&lt;img src=&quot;./assets/img/avatar1.jpg&quot; alt=&quot;&quot;/&gt;&lt;/span&gt;
            &lt;span class=&quot;subject&quot;&gt;
            &lt;span class=&quot;from&quot;&gt;Bob Nilson&lt;/span&gt;
            &lt;span class=&quot;time&quot;&gt;2 hrs&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;message&quot;&gt;
            Vivamus sed nibh auctor nibh congue nibh. auctor nibh
            auctor nibh...
            &lt;/span&gt;  
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;inbox.html?a=view&quot;&gt;
            &lt;span class=&quot;photo&quot;&gt;&lt;img src=&quot;./assets/img/avatar2.jpg&quot; alt=&quot;&quot;/&gt;&lt;/span&gt;
            &lt;span class=&quot;subject&quot;&gt;
            &lt;span class=&quot;from&quot;&gt;Lisa Wong&lt;/span&gt;
            &lt;span class=&quot;time&quot;&gt;40 mins&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;message&quot;&gt;
            Vivamus sed auctor 40% nibh congue nibh...
            &lt;/span&gt;  
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;inbox.html?a=view&quot;&gt;
            &lt;span class=&quot;photo&quot;&gt;&lt;img src=&quot;./assets/img/avatar3.jpg&quot; alt=&quot;&quot;/&gt;&lt;/span&gt;
            &lt;span class=&quot;subject&quot;&gt;
            &lt;span class=&quot;from&quot;&gt;Richard Doe&lt;/span&gt;
            &lt;span class=&quot;time&quot;&gt;46 mins&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;message&quot;&gt;
            Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh
            auctor nibh...
            &lt;/span&gt;  
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class=&quot;external&quot;&gt;   
        &lt;a href=&quot;inbox.html&quot;&gt;See all messages &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;!-- END INBOX DROPDOWN --&gt;
  &lt;!-- BEGIN TODO DROPDOWN --&gt;
  &lt;li class=&quot;dropdown&quot; id=&quot;header_task_bar&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
    &lt;i class=&quot;icon-tasks&quot;&gt;&lt;/i&gt;
    &lt;span class=&quot;badge&quot;&gt;5&lt;/span&gt;
    &lt;/a&gt;
    &lt;ul class=&quot;dropdown-menu extended tasks&quot;&gt;
      &lt;li&gt;
        &lt;p&gt;You have 12 pending tasks&lt;/p&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul class=&quot;dropdown-menu-list scroller&quot; style=&quot;height: 250px;&quot;&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;task&quot;&gt;
            &lt;span class=&quot;desc&quot;&gt;New release v1.2&lt;/span&gt;
            &lt;span class=&quot;percent&quot;&gt;30%&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;progress&quot;&gt;
            &lt;span style=&quot;width: 40%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;40&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;40% Complete&lt;/span&gt;
            &lt;/span&gt;
            &lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;task&quot;&gt;
            &lt;span class=&quot;desc&quot;&gt;Application deployment&lt;/span&gt;
            &lt;span class=&quot;percent&quot;&gt;65%&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;progress progress-striped&quot;&gt;
            &lt;span style=&quot;width: 65%;&quot; class=&quot;progress-bar progress-bar-danger&quot; aria-valuenow=&quot;65&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;65% Complete&lt;/span&gt;
            &lt;/span&gt;
            &lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;task&quot;&gt;
            &lt;span class=&quot;desc&quot;&gt;Mobile app release&lt;/span&gt;
            &lt;span class=&quot;percent&quot;&gt;98%&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;progress&quot;&gt;
            &lt;span style=&quot;width: 98%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;98&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;98% Complete&lt;/span&gt;
            &lt;/span&gt;
            &lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;task&quot;&gt;
            &lt;span class=&quot;desc&quot;&gt;Database migration&lt;/span&gt;
            &lt;span class=&quot;percent&quot;&gt;10%&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;progress progress-striped&quot;&gt;
            &lt;span style=&quot;width: 10%;&quot; class=&quot;progress-bar progress-bar-warning&quot; aria-valuenow=&quot;10&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;10% Complete&lt;/span&gt;
            &lt;/span&gt;
            &lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;task&quot;&gt;
            &lt;span class=&quot;desc&quot;&gt;Web server upgrade&lt;/span&gt;
            &lt;span class=&quot;percent&quot;&gt;58%&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;progress progress-striped&quot;&gt;
            &lt;span style=&quot;width: 58%;&quot; class=&quot;progress-bar progress-bar-info&quot; aria-valuenow=&quot;58&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;58% Complete&lt;/span&gt;
            &lt;/span&gt;
            &lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;task&quot;&gt;
            &lt;span class=&quot;desc&quot;&gt;Mobile development&lt;/span&gt;
            &lt;span class=&quot;percent&quot;&gt;85%&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;progress progress-striped&quot;&gt;
            &lt;span style=&quot;width: 85%;&quot; class=&quot;progress-bar progress-bar-success&quot; aria-valuenow=&quot;85&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;85% Complete&lt;/span&gt;
            &lt;/span&gt;
            &lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;  
            &lt;a href=&quot;#&quot;&gt;
            &lt;span class=&quot;task&quot;&gt;
            &lt;span class=&quot;desc&quot;&gt;New UI release&lt;/span&gt;
            &lt;span class=&quot;percent&quot;&gt;18%&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class=&quot;progress progress-striped&quot;&gt;
            &lt;span style=&quot;width: 18%;&quot; class=&quot;progress-bar progress-bar-important&quot; aria-valuenow=&quot;18&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;18% Complete&lt;/span&gt;
            &lt;/span&gt;
            &lt;/span&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class=&quot;external&quot;&gt;   
        &lt;a href=&quot;#&quot;&gt;See all tasks &lt;i class=&quot;m-icon-swapright&quot;&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;!-- END TODO DROPDOWN --&gt;
  &lt;!-- BEGIN USER LOGIN DROPDOWN --&gt;
  &lt;li class=&quot;dropdown user&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot;&gt;
    &lt;img alt=&quot;&quot; src=&quot;assets/img/avatar1_small.jpg&quot;/&gt;
    &lt;span class=&quot;username&quot;&gt;Bob Nilson&lt;/span&gt;
    &lt;i class=&quot;icon-angle-down&quot;&gt;&lt;/i&gt;
    &lt;/a&gt;
    &lt;ul class=&quot;dropdown-menu&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;extra_profile.html&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt; My Profile&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;page_calendar.html&quot;&gt;&lt;i class=&quot;icon-calendar&quot;&gt;&lt;/i&gt; My Calendar&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;inbox.html&quot;&gt;&lt;i class=&quot;icon-envelope&quot;&gt;&lt;/i&gt; My Inbox &lt;span class=&quot;badge badge-danger&quot;&gt;3&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-tasks&quot;&gt;&lt;/i&gt; My Tasks &lt;span class=&quot;badge badge-success&quot;&gt;7&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;javascript:;&quot; id=&quot;trigger_fullscreen&quot;&gt;&lt;i class=&quot;icon-move&quot;&gt;&lt;/i&gt; Full Screen&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;extra_lock.html&quot;&gt;&lt;i class=&quot;icon-lock&quot;&gt;&lt;/i&gt; Lock Screen&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;login.html&quot;&gt;&lt;i class=&quot;icon-key&quot;&gt;&lt;/i&gt; Log Out&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;!-- END USER LOGIN DROPDOWN --&gt;
&lt;/ul&gt;
&lt;!-- END TOP NAVIGATION MENU --&gt;
              </pre>              
            </section> 
          </div>  
        </div> 

         <div class="row">
          <div class="span12">
            <section id="main_menu">
              <div class="page-header">
                <h1>6. Sidebar Menu</h1>
                 <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
              </div>
              <p>
                Metronic supports flexible 4 level sidebar navigation menu.
              </p>  
              <img src="assets/i/main_menu.jpg" class="img-polaroid">
            </i>
              <h3>Sidebar Menu Options</h3>              
              <pre class="prettyprint linenums">
&lt;!-- BEGIN SIDEBAR --&gt;
&lt;div class=&quot;page-sidebar navbar-collapse collapse&quot;&gt;
  &lt;!-- BEGIN SIDEBAR MENU --&gt;         
  &lt;ul class=&quot;page-sidebar-menu&quot;&gt;
    &lt;li&gt;
      &lt;!-- BEGIN SIDEBAR TOGGLER BUTTON --&gt;
      &lt;div class=&quot;sidebar-toggler hidden-phone&quot;&gt;&lt;/div&gt;
      &lt;!-- BEGIN SIDEBAR TOGGLER BUTTON --&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;!-- BEGIN RESPONSIVE QUICK SEARCH FORM --&gt;
      &lt;form class=&quot;sidebar-search&quot; action=&quot;&quot; method=&quot;&quot;&gt;
        &lt;div class=&quot;form-container&quot;&gt;
          &lt;div class=&quot;input-box&quot;&gt;
            &lt;a href=&quot;javascript:;&quot; class=&quot;remove&quot;&gt;&lt;/a&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Search...&quot;/&gt;
            &lt;input type=&quot;button&quot; class=&quot;submit&quot; value=&quot; &quot;/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;!-- END RESPONSIVE QUICK SEARCH FORM --&gt;
    &lt;/li&gt;
    &lt;li class=&quot;start active &quot;&gt;
      &lt;a href=&quot;index.html&quot;&gt;
      &lt;i class=&quot;icon-home&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Dashboard&lt;/span&gt;          
      &lt;span class=&quot;selected&quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-cogs&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Layouts&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_language_bar.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-important&quot;&gt;new&lt;/span&gt;                            Language Switch Bar             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_horizontal_sidebar_menu.html&quot;&gt;
          Horizontal &amp; Sidebar Menu             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_horizontal_menu1.html&quot;&gt;
          Horizontal Menu 1             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_horizontal_menu2.html&quot;&gt;
          Horizontal Menu 2             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_sidebar_fixed.html&quot;&gt;
          Sidebar Fixed Page              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_sidebar_closed.html&quot;&gt;
          Sidebar Closed Page             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_blank_page.html&quot;&gt;
          Blank Page              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_boxed_page.html&quot;&gt;
          Boxed Page              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_boxed_not_responsive.html&quot;&gt;
          Non-Responsive Boxed Layout             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_promo.html&quot;&gt;
          Promo Page              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_email.html&quot;&gt;
          Email Templates             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_ajax.html&quot;&gt;
          Content Loading via Ajax              &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-bookmark-empty&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;UI Features&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_general.html&quot;&gt;
          General             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_buttons.html&quot;&gt;
          Buttons             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_typography.html&quot;&gt;
          Typography              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_modals.html&quot;&gt;
          Modals              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_tabs_accordions_navs.html&quot;&gt;
          Tabs, Accordions &amp; Navs             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_tiles.html&quot;&gt;
          Tiles             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_toastr.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-warning&quot;&gt;new&lt;/span&gt;                            Toastr Notifications              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_tree.html&quot;&gt;
          Tree View             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_nestable.html&quot;&gt;
          Nestable List             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_ion_sliders.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-important&quot;&gt;new&lt;/span&gt;                            Ion Range Sliders             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_noui_sliders.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-success&quot;&gt;new&lt;/span&gt;                            NoUI Range Sliders              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_jqueryui_sliders.html&quot;&gt;
          jQuery UI Sliders             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;ui_knob.html&quot;&gt;
          Knob Circle Dials             &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-table&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Form Stuff&lt;/span&gt;         
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_controls.html&quot;&gt;
          Form Controls             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_layouts.html&quot;&gt;
          Form Layouts              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_component.html&quot;&gt;
          Form Components             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_editable.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-warning&quot;&gt;new&lt;/span&gt;                            Form X-editable             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_wizard.html&quot;&gt;
          Form Wizard             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_validation.html&quot;&gt;
          Form Validation             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_image_crop.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-important&quot;&gt;new&lt;/span&gt;                            Image Cropping              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_fileupload.html&quot;&gt;
          Multiple File Upload              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;form_dropzone.html&quot;&gt;
          Dropzone File Upload              &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-sitemap&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Pages&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_portfolio.html&quot;&gt;
          &lt;i class=&quot;icon-briefcase&quot;&gt;&lt;/i&gt;
          &lt;span class=&quot;badge badge-warning badge-roundless&quot;&gt;new&lt;/span&gt;                            Portfolio             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_timeline.html&quot;&gt;
          &lt;i class=&quot;icon-time&quot;&gt;&lt;/i&gt;
          &lt;span class=&quot;badge badge-info&quot;&gt;4&lt;/span&gt;                           Timeline              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_coming_soon.html&quot;&gt;
          &lt;i class=&quot;icon-cogs&quot;&gt;&lt;/i&gt;
          Coming Soon             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_blog.html&quot;&gt;
          &lt;i class=&quot;icon-comments&quot;&gt;&lt;/i&gt;
          Blog              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_blog_item.html&quot;&gt;
          &lt;i class=&quot;icon-font&quot;&gt;&lt;/i&gt;
          Blog Post             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_news.html&quot;&gt;
          &lt;i class=&quot;icon-coffee&quot;&gt;&lt;/i&gt;
          &lt;span class=&quot;badge badge-success&quot;&gt;9&lt;/span&gt;                            News              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_news_item.html&quot;&gt;
          &lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;
          News View             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_about.html&quot;&gt;
          &lt;i class=&quot;icon-group&quot;&gt;&lt;/i&gt;
          About Us              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_contact.html&quot;&gt;
          &lt;i class=&quot;icon-envelope-alt&quot;&gt;&lt;/i&gt;
          Contact Us              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;page_calendar.html&quot;&gt;
          &lt;i class=&quot;icon-calendar&quot;&gt;&lt;/i&gt;
          &lt;span class=&quot;badge badge-important&quot;&gt;14&lt;/span&gt;                           Calendar              &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-gift&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Extra&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_profile.html&quot;&gt;
          User Profile              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_lock.html&quot;&gt;
          Lock Screen             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_faq.html&quot;&gt;
          FAQ             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;inbox.html&quot;&gt;
          &lt;span class=&quot;badge badge-important&quot;&gt;4&lt;/span&gt;                            Inbox             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_search.html&quot;&gt;
          Search Results              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_invoice.html&quot;&gt;
          Invoice             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_pricing_table.html&quot;&gt;
          Pricing Tables              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_404_option1.html&quot;&gt;
          404 Page Option 1             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_404_option2.html&quot;&gt;
          404 Page Option 2             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_404_option3.html&quot;&gt;
          404 Page Option 3             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_500_option1.html&quot;&gt;
          500 Page Option 1             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;extra_500_option2.html&quot;&gt;
          500 Page Option 2             &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a class=&quot;active&quot; href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-leaf&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;3 Level Menu&lt;/span&gt;
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li&gt;
          &lt;a href=&quot;javascript:;&quot;&gt;
          Item 1
          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class=&quot;sub-menu&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;javascript:;&quot;&gt;
          Item 1
          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class=&quot;sub-menu&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sample Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
          Item 3
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-folder-open&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;4 Level Menu&lt;/span&gt;
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li&gt;
          &lt;a href=&quot;javascript:;&quot;&gt;
          &lt;i class=&quot;icon-cogs&quot;&gt;&lt;/i&gt; 
          Item 1
          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class=&quot;sub-menu&quot;&gt;
            &lt;li&gt;
              &lt;a href=&quot;javascript:;&quot;&gt;
              &lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;
              Sample Link 1
              &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;ul class=&quot;sub-menu&quot;&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-remove&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-pencil&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-edit&quot;&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;  Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-external-link&quot;&gt;&lt;/i&gt;  Sample Link 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;  Sample Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;javascript:;&quot;&gt;
          &lt;i class=&quot;icon-globe&quot;&gt;&lt;/i&gt; 
          Item 2
          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class=&quot;sub-menu&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;  Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-external-link&quot;&gt;&lt;/i&gt;  Sample Link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-bell&quot;&gt;&lt;/i&gt;  Sample Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;
          &lt;i class=&quot;icon-folder-open&quot;&gt;&lt;/i&gt;
          Item 3
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Login Options&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;login.html&quot;&gt;
          Login Form 1              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;login_soft.html&quot;&gt;
          Login Form 2              &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-th&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Data Tables&lt;/span&gt;          
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;table_basic.html&quot;&gt;
          Basic Tables              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;table_responsive.html&quot;&gt;
          Responsive Tables             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;table_managed.html&quot;&gt;
          Managed Tables              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;table_editable.html&quot;&gt;
          Editable Tables             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;table_advanced.html&quot;&gt;
          Advanced Tables             &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-file-text&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Portlets&lt;/span&gt;         
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;portlet_general.html&quot;&gt;
          General Portlets              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;portlet_draggable.html&quot;&gt;
          Draggable Portlets              &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;&quot;&gt;
      &lt;a href=&quot;javascript:;&quot;&gt;
      &lt;i class=&quot;icon-map-marker&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Maps&lt;/span&gt;         
      &lt;span class=&quot;arrow &quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;sub-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;maps_google.html&quot;&gt;
          Google Maps             &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;maps_vector.html&quot;&gt;
          Vector Maps             &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class=&quot;last &quot;&gt;
      &lt;a href=&quot;charts.html&quot;&gt;
      &lt;i class=&quot;icon-bar-chart&quot;&gt;&lt;/i&gt; 
      &lt;span class=&quot;title&quot;&gt;Visual Charts&lt;/span&gt;          
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;!-- END SIDEBAR MENU --&gt;
&lt;/div&gt;
&lt;!-- END SIDEBAR --&gt;
              </pre>
           </section> 
          </div>  
        </div>     

 <div class="row">
          <div class="span12">
            <section id="main_menu">
              <div class="page-header">
                <h1>7. Horizontal Menu</h1>
                 <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
              </div>
              <p>
                Metronic supports flexible 4 level horizontal navigation menu.
              </p>  
              <img src="assets/i/hor_menu.jpg" class="img-polaroid">
            </i>
              <h3>Horizontal Menu Options</h3>              
              <pre class="prettyprint linenums">
&lt;!-- BEGIN HORIZANTAL MENU --&gt;
&lt;div class=&quot;hor-menu hidden-sm hidden-xs&quot;&gt;
  &lt;ul class=&quot;nav navbar-nav&quot;&gt;
    &lt;li&gt;
      &lt;a href=&quot;index.html&quot;&gt;
      Dashboard
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li  class=&quot;active&quot;&gt;
      &lt;a data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot; class=&quot;dropdown-toggle&quot; href=&quot;javascript:;&quot;&gt;
      &lt;span class=&quot;selected&quot;&gt;&lt;/span&gt;
      Layouts
      &lt;i class=&quot;icon-angle-down&quot;&gt;&lt;/i&gt;     
      &lt;/a&gt;
      &lt;ul class=&quot;dropdown-menu&quot;&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_language_bar.html&quot;&gt;
          &lt;span class=&quot;badge badge-roundless badge-important&quot;&gt;new&lt;/span&gt;Language Switch Bar&lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_horizontal_sidebar_menu.html&quot;&gt;
          Horizontal &amp; Sidebar Menu                     &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;active&quot;&gt;
          &lt;a href=&quot;layout_horizontal_menu1.html&quot;&gt;
          Horizontal Menu 1                    &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_horizontal_menu2.html&quot;&gt;
          Horizontal Menu 2                    &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_promo.html&quot;&gt;
          Promo Page                    &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_email.html&quot;&gt;
          Email Templates                     &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_ajax.html&quot;&gt;
          Content Loading via Ajax&lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_sidebar_closed.html&quot;&gt;
          Sidebar Closed Page                    &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_sidebar_fixed.html&quot;&gt;
          Sidebar Fixed Page                    &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_blank_page.html&quot;&gt;
          Blank Page                    &lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_boxed_page.html&quot;&gt;Boxed Page&lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a href=&quot;layout_boxed_not_responsive.html&quot;&gt;
          Non-Responsive Boxed Layout                     
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;dropdown-submenu&quot;&gt;
          &lt;a href=&quot;javascript:;&quot;&gt;
          More options
          &lt;/a&gt;
          &lt;ul class=&quot;dropdown-menu&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Second level link&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;dropdown-submenu&quot;&gt;
              &lt;a href=&quot;javascript:;&quot;&gt;More options&lt;/a&gt;
              &lt;ul class=&quot;dropdown-menu&quot;&gt;
                &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Third level link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Third level link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Third level link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Third level link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Third level link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Second level link&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Second level link&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Second level link&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href=&quot;&quot;&gt;Tables&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a data-hover=&quot;dropdown&quot; data-close-others=&quot;true&quot; class=&quot;dropdown-toggle&quot; href=&quot;&quot;&gt;Extra
      &lt;i class=&quot;icon-angle-down&quot;&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;dropdown-menu&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;FAQs&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Gallery&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Registration&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;2 Columns (Left)&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;2 Columns (Right)&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;span class=&quot;hor-menu-search-form-toggler&quot;&gt;&amp;nbsp;&lt;/span&gt;
      &lt;div class=&quot;search-form&quot;&gt;
        &lt;form class=&quot;form-search&quot;&gt;
          &lt;div class=&quot;input-group&quot;&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Search...&quot; class=&quot;form-control&quot;&gt;
            &lt;div class=&quot;input-group-btn&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;!-- END HORIZANTAL MENU --&gt;
              </pre>
           </section> 
          </div>  
        </div>     

        <div class="row">
          <div class="span12">
              <section id="new_page">
              <div class="page-header">
                <h1>8. New Page</h1>
                 <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
              </div>
              <p>
                To create a new page, you can use <code>layout_blank_page.html</code> which provides basic page layout 
                which you can extend and modify further.
              </p> 
              </section> 
          </div>  
        </div>    


        <div class="row">
          <div class="span12">
            <section id="buttons">
              <div class="page-header">
                <h1>9. Buttons</h1>
                 <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
              </div>
              <p>
                Button styles can be applied to any element with the .btn class applied. 
                Basically, you'll want to apply these to only  
                <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code>, <code>&lt;input&gt;</code> elements.
              </p> 
              <img src="assets/i/buttons.png" class="img-polaroid">
              <p></p>
              <table class="table table-bordered table-striped" width="600">
                  <thead>
                    <tr>
                      <th>class=""</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><code>&lt;button type=&quot;button&quot; class=&quot;btn default&quot;&gt;Default button&lt;/button&gt;</code></td>
                      <td>Default button</td>
                    </tr>
                    <tr>
                      <td><code>&lt;button type=&quot;button&quot; class=&quot;btn blue&quot;&gt;Blue button&lt;/button&gt;</code></td>
                      <td>Blue button</td>
                    </tr>
                    <tr>
                      <td><code>&lt;button type=&quot;button&quot; class=&quot;btn red&quot;&gt;Red button&lt;/button&gt;</code></td>
                      <td>Red button</td>
                    </tr>
                    <tr>
                      <td><code>&lt;button type=&quot;button&quot; class=&quot;btn green&quot;&gt;Green button&lt;/button&gt;</code></td>
                      <td>Green button</td>
                    </tr>
                    <tr>
                      <td><code>&lt;button type=&quot;button&quot; class=&quot;btn purple&quot;&gt;Purple button&lt;/button&gt;</code></td>
                      <td>Purple button</td>
                    </tr>
                    <tr>
                      <td><code>&lt;button type=&quot;button&quot; class=&quot;btn yellow&quot;&gt;Yellow button&lt;/button&gt;</code></td>
                      <td>Yellow button</td>
                    </tr>
                  </tbody>
                </table>
              </section> 
          </div>  
        </div> 


         <div class="row">
          <div class="span12">
              <section id="init">
              <div class="page-header">
                <h1>9. Javascript Initialization</h1>
                 <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
              </div>
              <p>
                Core javascript initialization implemented in <code>assets/scripts/app.js</code> thorugh App object as shown below.
                This approach enables an easy modular implementation to initialize jquery plugins and other application logics.
              </p> 
<pre class="prettyprint linenums">
var App = function () {

    var localVariable; //local variable

    var sampleFunction = function() {
       //sample function code
    }

    return {

        //main method to initiate template pages
        init: function () {           
            sampleFunction() // call local function
        },

        //sample method declaration
        sampleMethod: function (test) 
        {
          alert(test);
      }

    };

}();
</pre>

  <h3>Core Handler Functions defined in <code>assets/scripts/app.js</code></h3>
  <p>
  Below will be listed all handler functons implemented in App object:
  </p>  

  <h3>_getViewPort</h3>
  <p>
used to get the correct viewport width based on  http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
  </p>
  
  <h3>handleInit</h3>
  <p>
Main initialization function.
  </p> 


    <h3>handleSidebarState</h3>
  <p>
    Hides sidebar toggler if window width smaller than 900px(for table and phone mode)
  </p> 

      <h3>runResponsiveHandlers</h3>
  <p>
    Runs the responsive handler functions set by global API function App.addResponsiveHandler(function) which will be executed when screen size or content size changed.
  </p> 


  <h3>handleResponsiveOnResize</h3>
  <p>
Handles responsive elements on window resize.
  </p> 

   <h3>handleSidebarToggler</h3>
  <p>
Handles sidebar hide/close.
  </p> 

   <h3>handleSidebarAndContentHeight</h3>
  <p>
Handles the Sidebar and Content height to be properly set. 
  </p> 
      
  <h3>handleSidebarMenu</h3>
  <p>
 Initializes & handles sidebar navigation menu(the main menu).
  </p> 

  <h3>handleHorizontalMenu</h3>
  <p>
 Initializes & handles horizontal navigation menu.
  </p> 

  <h3>handlePortletTools</h3>
  <p>
 Initializes & handles portlet tools as described in below image.
  </p> 
  <img src="assets/i/portlet_tools.png">

  
  <h3>handleFixInputPlaceholderForIE</h3>
  <p>
  Fixes and enabled HTML5 input placeholder support for Internet Explorer 8 & 9.
  </p>  

  
  <h3>handleTooltip</h3>
  <p>
    Initializes & handles Bootstrap Tooltip Plugin(ui_general.html)
  </p>  

    <h3>handleTabs</h3>
  <p>
    Initializes & handles Bootstrap Tab Plugin(ui_tabs_accordions_navs.html)
  </p>  


  <h3>handleDropdowns</h3>
  <p>
     Initializes & handles Bootstrap Dropdowns(ui_buttons.html)
  </p>  

  <h3>handlePopover</h3>
  <p>
    Initializes & handles Bootstrap Popover Plugin(ui_general.html)
  </p> 
  
   <h3>handleScrollers</h3>
  <p>
    Initializes & handles jQuery Slim Scroller Plugin(index.html)
  </p> 
  

  <h3>handleUniform</h3>
  <p>
    Initializes & handles jQuery Uniform Plugin(form_component.html)
  </p>  

 
  <h3>handleAccordions</h3>
  <p>
    Initializes & handles Bootstrap Accordion(Collapse) Plugin(ui_tabs_accordions_navs.html)
  </p> 

  <h3>handleGoTop</h3>
  <p>
     Initializes & handles <code>go to top</code> button at footer.
  </p> 


  <h3>handleTheme</h3>
  <p>
      Initializes & handles style swicher panel.
  </p> 
  

              </section> 
          </div>  
        </div>    

        <div class="row">
          <div class="span12">
              <section id="extend">
                <div class="page-header">
                  <h1>10. Coding & Extending</h1>
                  <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                </div>
                <h3>
                  CSS
                </h3>
                <p>
                To overide the theme CSS styles you can use <code>assets/css/custom.css</code> for your own customization. This will make the future updates easier if you keep your own CSS code seperate.
                </p>
                <h3>
                  Javascript
                </h3>
                <p>
                To overide or extend the theme Javascript functions you can use <code>assets/scripts/custom.js</code>. Please keep your own code seperate as much as possible to make the future updates straightforward.
                </p>
              </section>
          </div>
        </div>

        <div class="row">
          <div class="span12">
        <section id="plugins">
          <div class="page-header">
            <h1>11. Javascript Plugins & Resources</h1>
            <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
          </div>
          <h3>
            Select Plugin Or Resource:
          </h3>
          <select id="pluginslist" onchange="ShowPlugin();">

            <option value="sparklines">jQuery Sparklines</option>
            <option value="pace">Pace - Page Progress Bar</option>
            <option value="session-timeout">Bootstrap Session Timeout</option>
            <option value="idle-timeout">jQuery Idle Timeout</option>

            <option value="touchspin">Bootstrap TouchSpin</option>
            <option value="datepaginator">Bootstrap Date Paginator</option>
            <option value="bootbox">Bootbox</option>

            <option value="jquery_typeahead">Twitter Typeahead</option>
            <option value="bootstrap_select">Bootstrap Select</option>
            <option value="jquery_notific8">jQuery Notific8</option>
            <option value="jquery_jstree">jQuery jsTree</option>
            
            <option value="bs-dropdown-hover">Bootstrap Hover Dropdown Plugin</option>
            <option value="mixitup">jQuery Mixitup</option>
            <option value="fuelux_spinner">Bootstrap FuelUX Input Spinner</option>
            <option value="nouislider">jQuery noUISlider</option>
            <option value="taostr">Bootstrap Toastr Notifications</option>
            <option value="markdown">Bootstrap Markdown</option>
            <option value="maxlength">Bootstrap Maxlength</option>
            <option value="switch">Bootstrap Switch</option>
            <option value="xeditable">Bootstrap X-editable</option>
            <option value="jcrop">jQuery jCrop</option>
            <option value="mask">jQuery Input Mask</option>
            <option value="multiselect">jQuery Multi Select</option>
            <option value="modal">Bootstrap Extended Modals</option>
            <option value="easy_pie_chart">jQuery Easy Pie Chart</option>
            <option value="ip_address">jQuery Input IP Address Control</option>
            <option value="backstretch">jQuery Backstretch</option>
            <option value="countdown">jQuery Countdown</option>
            <option value="datetimepicker">Bootstrap Datetimepicker</option>
            <option value="uisliders">jQuery UI Sliders</option>
            <option value="uisortable">jQuery UI Sortable</option>
            <option value="blockui">jQuery BlockUI</option>
            <option value="cookie">jQuery Cookie</option>
            <option value="pulsate">jQuery Pulsate</option>            
            <option value="bootpad">jQuery Bootpad for Bootstrap</option>
            <option value="respond">Respond</option>
            <option value="excanvas">Excanvas</option>
            <option value="colorpicker">Colorpicker for Bootstrap</option>
            <option value="datepicker">Datepicker for Bootstrap</option>
            <option value="daterangepicker">Date Range Picker for Bootstrap</option>
            <option value="bootstraptimepicker">Bootstrap Timepicker</option>
            <option value="clockfacetimepicker">Clockface Timepicker</option>
            <option value="tagsinput">jQuery Tags Input</option>
            <option value="toggle">Bootstrap Toggle</option>
            <option value="modal">Bootstrap Extended Modal</option>
            <option value="wysiwyg5">Bootstrap WYSIWYG5</option>
            <option value="ckeditor">CKEditor</option>                                   
            <option value="select2">Select2 Dropdowns</option>
            <option value="datatables">jQuery DataTables</option>
            <option value="fileinput">Bootstrap File Input</option>
            <option value="fileupload">jQuery File Upload</option>
            <option value="fancybox">FancyBox</option>
            <option value="flot">jQuery Flot Charts</option>
            <option value="gmaps">Google Maps - gmaps.js</option>
            <option value="fullcalendar">FullCalendar</option>
            <option value="gritter">Gritter Notifications</option>
            <option value="slimscroll">jQuery SlimScroll</option>
            <option value="jqvmap">JQVMAP</option>
            <option value="uniform">Uniform</option>
            <option value="dropzonejs">DropzoneJS</option>
            <option value="wizard">Bootstrap Form Wizard</option>
            <option value="nestable">Nestable</option>
            <option value="validation">jQuery Validation Plugin</option>
            <option value="fontawesome">Font Awesome</option>
            <option value="glyphiconspro">Glyphicons Pro</option>
            <option value="opensans">Open Sans</option>
          </select>         
          <script>
            function ShowPlugin(){
              var id = $('#pluginslist').val();
              $('.pluginwrap').hide();
              $('#' + id).show();
              return;
            }
          </script>  

          <div id="sparklines" class="pluginwrap pluginwrapActive">
              <h3>jQuery Sparklines</h3>
              <p>
                This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
              </p>
              <h4>CSS Files</h4>
              <pre class="prettyprint linenums">No CSS available</pre>
              <h4>JavaScript Files</h4>
              <pre class="prettyprint linenums">
  &lt;script src=&quot;assets/plugins/jquery.sparkline.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
              <h4>Demo Page</h4>
              <a href="../template_content/index.html" target="_blank">index.html</a>
              <h4>Official Documentation</h4>
              <a href="http://omnipotent.net/jquery.sparkline" target="_blank">http://omnipotent.net/jquery.sparkline</a>
          </div>

          <!--begin: v2.0 -->

          <div id="pace" class="pluginwrap">
            <h3>Pace - Page Progress Bar</h3>
            <p>
            An automatic web page progress bar. Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress. For more info check the plugin documentation
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/pace/themes/pace-theme-flash.css&quot;&gt;</pre>            
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/pace/pace.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_page_progress_style_1.html" target="_blank">ui_page_progress_style_1.html</a>
            <h4>Official Documentation</h4>
            <a href="http://github.hubspot.com/pace" target="_blank">http://github.hubspot.com/pace</a>
          </div>

          <div id="jquery_typeahead" class="pluginwrap">
            <h3>Twitter Typeahead</h3>
            <p>
            A fast and fully-featured autocomplete library.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/typeahead/typeahead.css&quot;&gt;</pre>            
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/typeahead/handlebars.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/typeahead/typeahead.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_form_tools.html" target="_blank">components_form_tools.html</a>
            <h4>Official Documentation</h4>
            <a href="http://twitter.github.io/typeahead.js/" target="_blank">http://twitter.github.io/typeahead.js/</a>
          </div>

          <div id="bootstrap_select" class="pluginwrap">
            <h3>Bootstrap Select</h3>
            <p>
            A custom select for @twitter Bootstrap using button dropdown.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/bootstrap-select/bootstrap-select.min.css&quot;/&gt;</pre>            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/bootstrap-select/bootstrap-select.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_dropdowns.html" target="_blank">components_dropdowns.html</a>
            <h4>Official Documentation</h4>
            <a href="http://silviomoreto.github.io/bootstrap-select/3/" target="_blank">http://silviomoreto.github.io/bootstrap-select/3/</a>
          </div>

          <div id="jquery_notific8" class="pluginwrap">
            <h3>jQuery Notific8</h3>
            <p>
            jQuery Notific8 is a notification plug-in that was inspired by the notification style introduced in Windows 8.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/jquery-notific8/jquery.notific8.min.css&quot;&gt;</pre>            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/jquery-notific8/jquery.notific8.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_notific8.html" target="_blank">ui_notific8.html</a>
            <h4>Official Documentation</h4>
            <a href="http://willsteinmetz.net/jquery/notific8" target="_blank">http://willsteinmetz.net/jquery/notific8</a>
          </div>

          <div id="jquery_jstree" class="pluginwrap">
            <h3>jQuery jsTree</h3>
            <p>
            A tree view plugin for jQuery
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/jstree/dist/themes/default/style.min.css&quot;&gt;</pre>            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/jstree/dist/jstree.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_tree.html" target="_blank">ui_tree.html</a>
            <h4>Official Documentation</h4>
            <a href="http://www.jstree.com/" target="_blank">http://www.jstree.com/</a>
          </div>


          <!--end: v2.0 -->

           <div id="maxlength" class="pluginwrap ">
              <h3>Bootstrap Maxlength</h3>
              <p>
                This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. 
This plugin uses the HTML5 attribute "maxlength" to work.
              </p>
              <h4>CSS Files</h4>
              <pre class="prettyprint linenums">No CSS available</pre>
              <h4>JavaScript Files</h4>
              <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
              <h4>Demo Page</h4>
              <a href="../template_content/components_form_tools.html" target="_blank">components_form_tools.html</a>
              <h4>Official Documentation</h4>
              <a href="http://mimo84.github.com/bootstrap-maxlength/" target="_blank">http://mimo84.github.com/bootstrap-maxlength/</a>
          </div>

          <div id="session-timeout" class="pluginwrap ">
              <h3>Bootstrap Session Timeout</h3>
              <p>
                After a set amount of time, a dialog is shown to the user with the option to either log out now, or stay connected. If log out now is selected, the page is redirected to a logout URL. If stay connected is selected, a keep-alive URL is requested through AJAX. If no options is selected after another set amount of time, the page is automatically redirected to a timeout URL.
              </p>
              <h4>CSS Files</h4>
              <pre class="prettyprint linenums">No CSS available</pre>
              <h4>JavaScript Files</h4>
              <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/bootstrap-sessiontimeout/jquery.sessionTimeout.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
              <h4>Demo Page</h4>
              <a href="../template_content/layout_session_timeout.html" target="_blank">layout_session_timeout.html</a>
              <h4>Official Documentation</h4>
              <a href="https://github.com/travishorn/jquery-sessionTimeout" target="_blank">https://github.com/travishorn/jquery-sessionTimeout</a>
          </div>

          <div id="idle-timeout" class="pluginwrap ">
              <h3>jQuery Idle Timeout</h3>
              <p>
               This script allows you to detect when a user becomes idle (detection provided by Paul Irish's idletimer plugin) and notify the user his/her session
is about to expire.  Similar to the technique seen on Mint.com.  Polling requests are automatically sent to the server at a configurable
interval, maintaining the users session while s/he is using your application for long periods of time.
              </p>
              <h4>CSS Files</h4>
              <pre class="prettyprint linenums">No CSS available</pre>
              <h4>JavaScript Files</h4>
              <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/jquery-idle-timeout/jquery.idletimeout.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jquery-idle-timeout/jquery.idletimer.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
              <h4>Demo Page</h4>
              <a href="../template_content/layout_idle_timeout.html" target="_blank">layout_idle_timeout.html</a>
              <h4>Official Documentation</h4>
              <a href="http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm" target="_blank">http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm</a>
          </div>

          <div id="markdown" class="pluginwrap ">
            <h3>Bootstrap Markdown</h3>
            <p>
            Markdown editing for Bootstrap.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css&quot;&gt;</pre>            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/bootstrap-markdown/js/bootstrap-markdown.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_editors.html" target="_blank">components_editors.html</a>
            <h4>Official Documentation</h4>
            <a href="http://toopay.github.com/bootstrap-markdown/" target="_blank">http://toopay.github.com/bootstrap-markdown/</a>
          </div>


           <!--===============-->

            <div id="bs-dropdown-hover" class="pluginwrap ">
            <h3>Bootstrap Hover Dropdown Plugin</h3>
            <p>
            A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available
</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/index.html" target="_blank">index.html</a>
            <h4>Official Documentation</h4>
            <a href="https://github.com/CWSpear/bootstrap-hover-dropdown" target="_blank">https://github.com/CWSpear/bootstrap-hover-dropdown</a>
          </div>

            <div id="mixitup" class="pluginwrap ">
            <h3>MixItUp - A CSS3 and jQuery Filter & Sort Plugin</h3>
            <p>
             MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It's perfect for portfolios, galleries, blogs, or any categorized or ordered content!

            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>            
<h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/jquery-mixitup/jquery.mixitup.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/page_portfolio.html" target="_blank">page_portfolio.html</a>
            <h4>Official Documentation</h4>
            <a href="http://mixitup.io" target="_blank">http://mixitup.io</a>
          </div>



          <div id="touchspin" class="pluginwrap ">
            <h3>Bootstrap TouchSpin</h3>
            <p>
            A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>            
<h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_form_tools.html" target="_blank">components_form_tools.html</a>
            <h4>Official Documentation</h4>
            <a href="http://www.virtuosoft.eu/code/bootstrap-touchspin/" target="_blank">http://www.virtuosoft.eu/code/bootstrap-touchspin/</a>
          </div>

          <div id="datepaginator" class="pluginwrap ">
            <h3>Bootstrap Date Paginator</h3>
            <p>
            A jQuery plugin which takes Twitter Bootstrap's already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/bootstrap-datepicker/css/datepicker.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;</pre>            
<h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/moment.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/bootstrap-datepaginator/bootstrap-datepaginator.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_datepaginator.html" target="_blank">ui_datepaginator.html</a>
            <h4>Official Documentation</h4>
            <a href="http://www.jonathandanielmiles.com/bootstrap-datepaginator/" target="_blank">http://www.jonathandanielmiles.com/bootstrap-datepaginator/</a>
          </div>

          <div id="bootbox" class="pluginwrap ">
            <h3>Bootbox.js</h3>
            <p>
            Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, 
            without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>            
<h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/bootbox/bootbox.min.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_bootbox.html" target="_blank">ui_bootbox.html</a>
            <h4>Official Documentation</h4>
            <a href="http://bootboxjs.com/" target="_blank">http://bootboxjs.com/</a>
          </div>


           <div id="fuelux_spinner" class="pluginwrap ">
            <h3>Bootstrap FuelUX Input Spinner</h3>
            <p>
            Bootstrap FuelUX Input Spinner For Metronic.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/fuelux/js/spinner.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_form_tools.html" target="_blank">components_form_tools.html</a>
            <h4>Official Documentation</h4>
            <a href="http://exacttarget.github.io/fuelux/#spinner" target="_blank">http://exacttarget.github.io/fuelux/#spinner</a>
          </div>

           <div id="nouislider" class="pluginwrap ">
            <h3>jQuery noUiSlider</h3>
            <p>
            noUiSlider is a super tiny jQuery plugin that allows you to create range sliders.  
            It fully supports touch, and it is way(!) less bloated than the jQueryUI library.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/nouislider/jquery.nouislider.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;</pre>            
<h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/nouislider/jquery.nouislider.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_noui_sliders.html" target="_blank">ui_noui_sliders.html</a>
            <h4>Official Documentation</h4>
            <a href="http://refreshless.com/nouislider/" target="_blank">http://refreshless.com/nouislider/</a>
          </div>

                     <div id="ionrangesliders" class="pluginwrap ">
            <h3>jQuery IonRange Slider</h3>
            <p>
            Beautiful, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings and can be completely modified with CSS.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/ion.rangeslider/css/ion.rangeSlider.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;assets/plugins/ion.rangeslider/css/ion.rangeSlider.Metronic.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;</pre>            
<h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/ion.rangeslider/js/ion-rangeSlider/ion.rangeSlider.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_noui_sliders.html" target="_blank">ui_noui_sliders.html</a>
            <h4>Official Documentation</h4>
            <a href="http://ionden.com/a/plugins/ion.rangeSlider/" target="_blank">http://ionden.com/a/plugins/ion.rangeSlider/</a>
          </div>

<div id="taostr" class="pluginwrap ">
            <h3>Bootstrap Toastr Notifications</h3>
            <p>
            Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/bootstrap-toastr/toastr.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;</pre>            
<h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/bootstrap-toastr/toastr.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_toastr.html" target="_blank">ui_toastr.html</a>
            <h4>Official Documentation</h4>
            <a href="http://codeseven.github.io/toastr/demo.html" target="_blank">http://codeseven.github.io/toastr/demo.html</a>
          </div>

          <!--===============-->

          <div id="mask" class="pluginwrap ">
            <h3>jQuery Input Mask</h3>
            <p>
              jQuery Input Mask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available
            </pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_form_tools.html" target="_blank">components_form_tools.html</a>
            <h4>Official Documentation</h4>
            <a href="http://github.com/RobinHerbots/jquery.inputmask" target="_blank">http://github.com/RobinHerbots/jquery.inputmask</a>
          </div>

           <div id="multiselect" class="pluginwrap ">
            <h3>jQuery Multi Select</h3>
            <p>
             This plugin is a drop-in replacement for the standard select element with multiple attribute activated.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/jquery-multi-select/css/multi-select.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;</pre>            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/jquery-multi-select/js/jquery.multi-select.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_dropdowns.html" target="_blank">components_dropdowns.html</a>
            <h4>Official Documentation</h4>
            <a href="http://loudev.com/" target="_blank">http://loudev.com/</a>
          </div>

             <div id="switch" class="pluginwrap ">
              <h3>Bootstrap Switch</h3>
              <p>
               Use Radio Buttons as switches.
              </p>
              <h4>CSS Files</h4>
              <pre class="prettyprint linenums">
  &lt;link href=&quot;assets/plugins/bootstrap-switch/css/bootstrap-switch.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;</pre>              
              <h4>JavaScript Files</h4>
              <pre class="prettyprint linenums">
  &lt;script src=&quot;assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
              <h4>Demo Page</h4>
              <a href="../template_content/components_form_tools.html" target="_blank">components_form_tools.html</a>
              <h4>Official Documentation</h4>
              <a href="http://www.larentis.eu/switch/" target="_blank">http://www.larentis.eu/switch/</a>
            </div>


            <div id="jcrop" class="pluginwrap ">
              <h3>jQuery jCrop</h3>
              <p>
               Jcrop is the quick and easy way to add image cropping functionality to
your web application. It combines the ease-of-use of a typical jQuery
plugin with a powerful cross-platform DHTML cropping engine that is
faithful to familiar desktop graphics applications.
              </p>
              <h4>CSS Files</h4>
              <pre class="prettyprint linenums">
  &lt;link href=&quot;assets/plugins/jcrop/css/jquery.Jcrop.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;</pre>
              
              <h4>JavaScript Files</h4>
              <pre class="prettyprint linenums">
  &lt;script src=&quot;assets/plugins/jcrop/js/jquery.color.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;assets/plugins/jcrop/js/jquery.Jcrop.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
              <h4>Demo Page</h4>
              <a href="../template_content/form_image_crop.html" target="_blank">form_image_crop.html</a>
              <h4>Official Documentation</h4>
              <a href="http://github.com/tapmodo/Jcrop" target="_blank">http://github.com/tapmodo/Jcrop</a>
            </div>


            <div id="xeditable" class="pluginwrap ">
              <h3>Bootstrap X-editable</h3>
              <p>
               In-place editing with Twitter Bootstrap.
              </p>
              <h4>CSS Files</h4>

              <pre class="prettyprint linenums">
  &lt;!-- BEGIN PLUGINS USED BY X-EDITABLE --&gt;
  &lt;link href=&quot;assets/plugins/select2/select2.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;link href=&quot;assets/plugins/select2/select2-metronic.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;link href=&quot;assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;link href=&quot;assets/plugins/bootstrap-datepicker/css/datepicker.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;link href=&quot;assets/plugins/bootstrap-timepicker/compiled/timepicker.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;link href=&quot;assets/plugins/bootstrap-datetimepicker/css/datetimepicker.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;!-- END PLUGINS USED BY X-EDITABLE --&gt;
  &lt;!-- BEGIN X-EDITABLE PLUGIN--&gt;
  &lt;link href=&quot;assets/plugins/bootstrap-editable/bootstrap-editable/css/bootstrap-editable.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;link href=&quot;assets/plugins/bootstrap-editable/inputs-ext/address/address.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
  &lt;!-- END X-EDITABLE PLUGIN--&gt;</pre>
              
              <h4>JavaScript Files</h4>
              <pre class="prettyprint linenums">
  &lt;!-- BEGIN PLUGINS USED BY X-EDITABLE --&gt;
  &lt;script src=&quot;assets/plugins/select2/select2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;assets/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;!-- END PLUGINS USED BY X-EDITABLE --&gt;
  &lt;!-- BEGIN X-EDITABLE PLUGIN--&gt;
  &lt;script src=&quot;assets/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;assets/plugins/bootstrap-editable/inputs-ext/address/address.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;assets/plugins/bootstrap-editable/inputs-ext/wysihtml5/wysihtml5.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;!-- END X-EDITABLE PLUGIN--&gt;</pre>
              <h4>Demo Page</h4>
              <a href="../template_content/form_editable.html" target="_blank">form_editable.html</a>
              <h4>Official Documentation</h4>
              <a href="http://vitalets.github.io/x-editable/demo.html" target="_blank">http://vitalets.github.io/x-editable/demo.html</a>
            </div>

          <div id="modal" class="pluginwrap ">
            <h3>Bootstrap Extended Modals</h3>
            <p>
             Responsive, Stackable, AJAX and more.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
&lt;link href=&quot;assets/plugins/bootstrap-modal/css/bootstrap-modal.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
            </pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/bootstrap-modal/js/bootstrap-modal.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_modals.html" target="_blank">ui_modals.html</a>
            <h4>Official Documentation</h4>
            <a href="http://jschr.github.com/bootstrap-modal/" target="_blank">http://jschr.github.com/bootstrap-modal/</a>
          </div>


 <div id="easy_pie_chart" class="pluginwrap ">
            <h3>jQuery Easy Pie Chart</h3>
            <p>
             Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
            </pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/index.html" target="_blank">index.html</a>
            <h4>Official Documentation</h4>
            <a href="http://rendro.github.io/easy-pie-chart/" target="_blank">http://rendro.github.io/easy-pie-chart/</a>
          </div>

            <div id="sparklines" class="pluginwrap ">
              <h3>jQuery Sparklines</h3>
              <p>
                This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
              </p>
              <h4>CSS Files</h4>
              <pre class="prettyprint linenums">
No CSS available
              </pre>
              <h4>JavaScript Files</h4>
              <pre class="prettyprint linenums">
  &lt;script src=&quot;assets/plugins/jquery.sparkline.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
              <h4>Demo Page</h4>
              <a href="../template_content/index.html" target="_blank">index.html</a>
              <h4>Official Documentation</h4>
              <a href="http://omnipotent.net/jquery.sparkline" target="_blank">http://omnipotent.net/jquery.sparkline</a>
          </div>

           <div id="bootpad" class="pluginwrap ">
              <h3>jQuery Bootpad for Bootstrap</h3>
              <p>
                Dynamic pagination jQuery plugin. Works well with twitter bootstrap or standalone.
              </p>
              <h4>CSS Files</h4>
              <pre class="prettyprint linenums">
No CSS available
              </pre>
              <h4>JavaScript Files</h4>
              <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/jquery.bootpag.min.js&quot;&gt;&lt;/script&gt;</pre>
              <h4>Demo Page</h4>
              <a href="../template_content/ui_general.html" target="_blank">ui_general.html</a>
              <h4>Official Documentation</h4>
              <a href="http://botmonster.com/jquery-bootpag/" target="_blank">http://botmonster.com/jquery-bootpag/</a>
          </div>


          <div id="ip_address" class="pluginwrap ">
            <h3>jQuery Input IP Address Control</h3>
            <p>
              During user input field, this plugin controls the format of IPv4 or IPv6 addresses.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available
            </pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/jquery.input-ip-address-control-1.0.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_form_tools.html" target="_blank">components_form_tools.html</a>
            <h4>Official Documentation</h4>
            <a href="https://code.google.com/p/jquery-input-ip-address-control" target="_blank">https://code.google.com/p/jquery-input-ip-address-control</a>
          </div>
          
          
            <div id="uisliders" class="pluginwrap">
            <h3>jQuery UI Sliders</h3>
            <p>
              The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.css&quot; rel=&quot;stylesheet&quot;/&gt; </pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_sliders.html" target="_blank">ui_sliders.html</a>
            <h4>Official Documentation</h4>
            <a href="http://jqueryui.com/slider/" target="_blank">www.jqueryui.com/slider/</a>
          </div>


           <div id="backstretch" class="pluginwrap">
            <h3>jQuery Backstretch</h3>
            <p>
            A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/backstretch/jquery.backstretch.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/page_coming_soon.html" target="_blank">page_coming_soon.html</a>
            <h4>Official Documentation</h4>
            <a href="http://srobbin.com/jquery-plugins/backstretch/" target="_blank">http://srobbin.com/jquery-plugins/backstretch/</a>
          </div>

          <div id="countdown" class="pluginwrap">
            <h3>jQuery Countdown</h3>
            <p>
             A jQuery plugin that sets a div or span to show a countdown to a given time.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/countdown/jquery.countdown.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/page_coming_soon.html" target="_blank">page_coming_soon.html</a>
            <h4>Official Documentation</h4>
            <a href="http://keith-wood.name/countdown.html" target="_blank">http://keith-wood.name/countdown.html</a>
          </div>

            <div id="datetimepicker" class="pluginwrap">
            <h3>Bootstrap Datetimepicker</h3>
            <p>
             This project is a fork of bootstrap-datetimepicker project which doesn't include Time part.
Some others parts has been improved as for example the load process which now accepts the ISO-8601 format.
I've copy/pasted the forked project's documentation and added my specifications.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/bootstrap-datetimepicker/css/datetimepicker.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_pickers.html" target="_blank">components_pickers.html</a>
            <h4>Official Documentation</h4>
            <a href="http://www.malot.fr/bootstrap-datetimepicker/" target="_blank">http://www.malot.fr/bootstrap-datetimepicker/</a>
          </div>

          <div id="select2" class="pluginwrap ">
            <h3>Select2</h3>
            <p>
              Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/select2/select2.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/select2/select2-metronic.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/select2/select2.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_dropdowns.html" target="_blank">components_dropdowns.html</a>
            <h4>Official Documentation</h4>
            <a href="http://ivaynberg.github.io/select2" target="_blank">ivaynberg.github.io/select2/</a>
          </div>          
          <div id="uisortable" class="pluginwrap">
            <h3>jQuery UI Sortable</h3>
            <p>
              Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share <code>draggable</code> properties.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.css&quot; rel=&quot;stylesheet&quot;/&gt; </pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js&quot;&gt;&lt;/script&gt;         </pre>
            <h4>Demo Page</h4>
            <a href="../template_content/portlet_draggable.html" target="_blank">portlet_draggable.html</a>
            <h4>Official Documentation</h4>
            <a href="http://jqueryui.com/sortable/" target="_blank">www.jqueryui.com/sortable/</a>
          </div>

          <div id="blockui" class="pluginwrap">
            <h3>jQuery BlockUI</h3>
            <p>
              The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/js/jquery.blockui.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/index.html" target="_blank">index.html</a>
            <h4>Official Documentation</h4>
            <a href="http://jquery.malsup.com/block/" target="_blank">www.jquery.malsup.com/block/</a>
          </div>

          
          <div id="cookie" class="pluginwrap">
            <h3>jQuery Cookie</h3>
            <p>
              A simple, lightweight jQuery plugin for reading, writing and deleting cookies.            
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/js/jquery.cookie.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/index.html" target="_blank">index.html</a>
            <h4>Official Documentation</h4>
            <a href="https://github.com/carhartl/jquery-cookie" target="_blank">www.github.com/carhartl/jquery-cookie</a>
          </div>
          
          <div id="pulsate" class="pluginwrap">
            <h3>jQuery Pulsate</h3>
            <p>
              jQuery Pulsate provides animated pulsating effect that's useful for focussing attention to a certain part of your webpage in a subtle way.            
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/js/jquery.pulsate.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_general.html" target="_blank">ui_general.html</a>
            <h4>Official Documentation</h4>
            <a href="http://kilianvalkhof.com/jquerypulsate/" target="_blank">www.kilianvalkhof.com/jquerypulsate/</a>
          </div>
          
          <div id="respond" class="pluginwrap">
            <h3>Respond</h3>
            <p>
              A fast & lightweight polyfill for min/max-width and CSS3 Media Queries (for IE 6-8, and more)           
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;!--[if lt IE 9]&gt;
&lt;script src=&quot;assets/plugins/js/respond.js&quot;&gt;&lt;/script&gt;  
&lt;![endif]--&gt; </pre>
            <h4>Demo Page</h4>
            <a href="../template_content/index.html" target="_blank">index.html</a>
            <h4>Official Documentation</h4>
            <a href="https://github.com/scottjehl/Respond" target="_blank">www.github.com/scottjehl/Respond</a>
          </div>

          <div id="excanvas" class="pluginwrap">
            <h3>Excanvas</h3>
            <p>
              Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages           
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;!--[if lt IE 9]&gt;
&lt;script src=&quot;assets/plugins/js/excanvas.js&quot;&gt;&lt;/script&gt; 
&lt;![endif]--&gt; </pre>
            <h4>Demo Page</h4>
            <a href="../template_content/index.html" target="_blank">index.html</a>
            <h4>Official Documentation</h4>
            <a href="http://excanvas.sourceforge.net/" target="_blank">www.excanvas.sourceforge.net/</a>
          </div>

          <div id="colorpicker" class="pluginwrap">
            <h3>Colorpicker for Bootstrap</h3>
            <p>
              Add color picker to field or to any other element
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/bootstrap-colorpicker/css/colorpicker.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js&quot;&gt;&lt;/script&gt;  </pre>           
            <h4>Demo Page</h4>
            <a href="../template_content/components_pickers.html" target="_blank">components_pickers.html</a>
            <h4>Official Documentation</h4>
            <a href="http://www.eyecon.ro/bootstrap-colorpicker/" target="_blank">www.eyecon.ro/bootstrap-colorpicker/</a>
          </div>

          <div id="datepicker" class="pluginwrap">
            <h3>Enhanced Datepicker for Bootstrap</h3>
            <p>
              Add datepicker picker to field or to any other element
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/bootstrap-datepicker/css/datepicker.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_pickers.html" target="_blank">components_pickers.html</a>
            <h4>Official Documentation</h4>
            <a href="https://github.com/eternicode/bootstrap-datepicker" target="_blank">https://github.com/eternicode/bootstrap-datepicker</a>
          </div>

          <div id="daterangepicker" class="pluginwrap">
            <h3>Date Range Picker for Bootstrap</h3>
            <p>
              This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/bootstrap-daterangepicker/daterangepicker.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/bootstrap-daterangepicker/date.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/bootstrap-daterangepicker/daterangepicker.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_pickers.html" target="_blank">components_pickers.html</a>
            <h4>Official Documentation</h4>
            <a href="https://github.com/dangrossman/bootstrap-daterangepicker" target="_blank">www.github.com/dangrossman/bootstrap-daterangepicker</a>
          </div>
          
          <div id="bootstraptimepicker" class="pluginwrap">
            <h3>Bootstrap Timepicker</h3>
            <p>
              Easily select a time for a text input using your mouse or keyboards arrow keys.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/bootstrap-timepicker/compiled/timepicker.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_pickers.html" target="_blank">components_pickers.html</a>
            <h4>Official Documentation</h4>
            <a href="http://jdewit.github.com/bootstrap-timepicker/" target="_blank">www.jdewit.github.com/bootstrap-timepicker/</a>
          </div>

          <div id="clockfacetimepicker" class="pluginwrap">
            <h3>Clockface Timepicker</h3>
            <p>
              Clockface is a simple timepicker for Twitter Bootstrap
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/clockface/css/clockface.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/clockface/js/clockface.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_pickers.html" target="_blank">components_pickers.html</a>
            <h4>Official Documentation</h4>
            <a href="http://vitalets.github.com/clockface/" target="_blank">www.vitalets.github.com/clockface/</a>
          </div>

          <div id="tagsinput" class="pluginwrap">
            <h3>jQuery Tags Input</h3>
            <p>
              Magically convert a simple text input into a cool tag list with this jQuery plugin
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/jquery-tags-input/jquery.tagsinput.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/jquery-tags-input/jquery.tagsinput.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_form_tools.html" target="_blank">components_form_tools.html</a>
            <h4>Official Documentation</h4>
            <a href="https://github.com/xoxco/jQuery-Tags-Input" target="_blank">https://github.com/xoxco/jQuery-Tags-Input</a>
          </div>

          <div id="wysiwyg5" class="pluginwrap">
            <h3>Bootstrap WYSIWYG5</h3>
            <p>
              Simple WYSIWYG Editor for Bootstrap
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js&quot;&gt;&lt;/script&gt; 
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_editors.html" target="_blank">components_editors.html</a>
            <h4>Official Documentation</h4>
            <a href="http://jhollingworth.github.com/bootstrap-wysihtml5/" target="_blank">http://jhollingworth.github.com/bootstrap-wysihtml5/</a>
          </div>

          <div id="ckeditor" class="pluginwrap">
            <h3>CKEditor</h3>
            <p>
              CKEditor is a ready-for-use HTML text editor designed to simplify web content creation
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/ckeditor/ckeditor.js&quot;&gt;&lt;/script&gt;  </pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_editors.html" target="_blank">components_editors.html</a>
            <h4>Official Documentation</h4>
            <a href="http://ckeditor.com/" target="_blank">http://ckeditor.com/</a>
          </div>

          <div id="datatables" class="pluginwrap">
            <h3>DataTables</h3>
            <p>
              DataTables for Twitter Bootstrap
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/plugins/data-tables/DT_bootstrap.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/data-tables/jquery.dataTables.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/table_managed.html" target="_blank">table_managed.html</a>
            <h4>Official Documentation</h4>
            <a href="http://www.datatables.net/blog/Twitter_Bootstrap_2" target="_blank">http://www.datatables.net/blog/Twitter_Bootstrap_2</a>
          </div>

          <div id="fileinput" class="pluginwrap">
            <h3>Bootstrap File Unput</h3>
            <p>
              The file input plugin allows you to create a visually appealing file or image input widgets.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS Available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/bootstrap-fileinput/bootstrap-fileinput.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/components_form_tools.html" target="_blank">components_form_tools.html</a>
            <h4>Official Documentation</h4>
            <a href="http://jasny.github.io/bootstrap/javascript/#fileinput" target="_blank">http://jasny.github.io/bootstrap/javascript/#fileinput</a>
          </div>
          
          <div id="fileupload" class="pluginwrap">
            <h3>jQuery Fileupload</h3>
            <p>
              File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">&lt;!-- BEGIN PAGE LEVEL STYLES --&gt;
&lt;link href=&quot;assets/plugins/jquery-file-upload/blueimp-gallery/blueimp-gallery.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;link href=&quot;assets/plugins/jquery-file-upload/css/jquery.fileupload.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;link href=&quot;assets/plugins/jquery-file-upload/css/jquery.fileupload-ui.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;!-- END PAGE LEVEL STYLES --&gt;
</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">&lt;!-- BEGIN:File Upload Plugin JS files--&gt;
&lt;!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js&quot;&gt;&lt;/script&gt;
&lt;!-- The Templates plugin is included to render the upload/download listings --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/vendor/tmpl.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- The Load Image plugin is included for the preview images and image resizing functionality --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/vendor/load-image.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- The Canvas to Blob plugin is included for image resizing functionality --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/vendor/canvas-to-blob.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- blueimp Gallery script --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/blueimp-gallery/jquery.blueimp-gallery.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- The Iframe Transport is required for browsers without support for XHR file uploads --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/jquery.iframe-transport.js&quot;&gt;&lt;/script&gt;
&lt;!-- The basic File Upload plugin --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/jquery.fileupload.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload processing plugin --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/jquery.fileupload-process.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload image preview &amp; resize plugin --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/jquery.fileupload-image.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload audio preview plugin --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/jquery.fileupload-audio.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload video preview plugin --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/jquery.fileupload-video.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload validation plugin --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/jquery.fileupload-validate.js&quot;&gt;&lt;/script&gt;
&lt;!-- The File Upload user interface plugin --&gt;
&lt;script src=&quot;assets/plugins/jquery-file-upload/js/jquery.fileupload-ui.js&quot;&gt;&lt;/script&gt;
&lt;!-- The main application script --&gt;
&lt;!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 --&gt;
&lt;!--[if (gte IE 8)&amp;(lt IE 10)]&gt;
    &lt;script src=&quot;assets/plugins/jquery-file-upload/js/cors/jquery.xdr-transport.js&quot;&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
&lt;!-- END:File Upload Plugin JS files--&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/form_fileupload.html" target="_blank">form_fileupload.html</a>
            <h4>Official Documentation</h4>
            <a href="http://blueimp.github.io/jQuery-File-Upload/" target="_blank">http://blueimp.github.io/jQuery-File-Upload/</a>
          </div>

          <div id="fancybox" class="pluginwrap">
            <h3>FancyBox</h3>
            <p>
              FancyBox is a tool for displaying images, html content and multi-media
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/fancybox/source/jquery.fancybox.css&quot; rel=&quot;stylesheet&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/fancybox/source/jquery.fancybox.pack.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/gallery.html" target="_blank">gallery.html</a>
            <h4>Official Documentation</h4>
            <a href="http://fancybox.net/" target="_blank">http://fancybox.net/</a>
          </div>

          <div id="flot" class="pluginwrap">
            <h3>Flot</h3>
            <p>
              Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/flot/jquery.flot.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/flot/jquery.flot.resize.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;          
            </pre>
            <h4>Demo Page</h4>
            <a href="../template_content/charts.html" target="_blank">charts.html</a>
            <h4>Official Documentation</h4>
            <a href="http://www.flotcharts.org/" target="_blank">http://www.flotcharts.org/</a>
          </div>

          <div id="gmaps" class="pluginwrap">
            <h3>gmaps.js</h3>
            <p>
              gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/js/gmaps.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/plugins/js/demo.gmaps.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/maps_google.html" target="_blank">maps_google.html</a>
            <h4>Official Documentation</h4>
            <a href="http://hpneo.github.com/gmaps/" target="_blank">http://hpneo.github.com/gmaps/</a>
          </div>
          
          <div id="fullcalendar" class="pluginwrap">
            <h3>FullCalendar</h3>
            <p>
              FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/fullcalendar/fullcalendar/bootstrap-fullcalendar.css&quot; rel=&quot;stylesheet&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/fullcalendar/fullcalendar/fullcalendar.min.js&quot;&gt;&lt;/script&gt;  </pre>
            <h4>Demo Page</h4>
            <a href="../template_content/calendar.html" target="_blank">calendar.html</a>
            <h4>Official Documentation</h4>
            <a href="http://arshaw.com/fullcalendar/" target="_blank">http://arshaw.com/fullcalendar/</a>
          </div>

          <div id="gritter" class="pluginwrap">
            <h3>Gritter Notifications</h3>
            <p>
              The super awesome background is just to show you that all notifications are transparent
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/gritter/css/jquery.gritter.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/gritter/js/jquery.gritter.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_general.html" target="_blank">ui_general.html</a>
            <h4>Official Documentation</h4>
            <a href="http://boedesign.com/demos/gritter/" target="_blank">http://boedesign.com/demos/gritter/</a>
          </div>
          
          <div id="slimscroll" class="pluginwrap">
            <h3>jQuery slimScroll</h3>
            <p>
              slimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js&quot;&gt;&lt;/script&gt; 
&lt;script src=&quot;assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/index.html" target="_blank">index.html</a>
            <h4>Official Documentation</h4>
            <a href="http://rocha.la/jQuery-slimScroll" target="_blank">http://rocha.la/jQuery-slimScroll</a>
          </div>

          <div id="jqvmap" class="pluginwrap">
            <h3>JQVMAP</h3>
            <p>
              JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/jqvmap/jqvmap/jqvmap.css&quot; media=&quot;screen&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/jqvmap/jqvmap/jquery.vmap.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  
&lt;script src=&quot;assets/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/maps_vector.html" target="_blank">maps_vector.html</a>
            <h4>Official Documentation</h4>
            <a href="http://jqvmap.com/" target="_blank">http://jqvmap.com/</a>
          </div>

          <div id="uniform" class="pluginwrap">
            <h3>Uniform</h3>
            <p>
              Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;assets/plugins/uniform/css/uniform.default.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/uniform/jquery.uniform.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/form_controls.html" target="_blank">form_controls.html</a>
            <h4>Official Documentation</h4>
            <a href="http://uniformjs.com/" target="_blank">http://uniformjs.com/</a>
          </div>

          <div id="dropzonejs" class="pluginwrap">
            <h3>DropzoneJS</h3>
            <p>
              DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/dropzone/css/dropzone.css&quot; rel=&quot;stylesheet&quot;/&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/dropzone/dropzone.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/form_dropzone.html" target="_blank">form_dropzone.html</a>
            <h4>Official Documentation</h4>
            <a href="http://www.dropzonejs.com/" target="_blank">http://www.dropzonejs.com/</a>
          </div>

          

           <div id="wizard" class="pluginwrap">
            <h3>Bootstrap Form Wizard</h3>
            <p>
              This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/form_wizard.html" target="_blank">form_wizard.html</a>
            <h4>Official Documentation</h4>
            <a href="https://github.com/VinceG/twitter-bootstrap-wizard" target="_blank">https://github.com/VinceG/twitter-bootstrap-wizard</a>
          </div>

          <div id="nestable" class="pluginwrap">
            <h3>Nestable</h3>
            <p>
              Drag & drop hierarchical list with mouse and touch compatibility.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; tyyope=&quot;text/css&quot; href=&quot;assets/plugins/jquery-nestable/jquery.nestable.css&quot; /&gt;</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script src=&quot;assets/plugins/jquery-nestable/jquery.nestable.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/ui_nestable.html" target="_blank">ui_nestable.html</a>
            <h4>Official Documentation</h4>
            <a href="https://github.com/dbushell/Nestable" target="_blank">https://github.com/dbushell/Nestable</a>
          </div>
          
          <div id="validation" class="pluginwrap">
            <h3>jQuery Validation Plugin</h3>
            <p>
              The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
No CSS available</pre>
            <h4>JavaScript Files</h4>
            <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot; src=&quot;assets/plugins/jquery-validation/dist/jquery.validate.min.js&quot;&gt;&lt;/script&gt;</pre>
            <h4>Demo Page</h4>
            <a href="../template_content/form_validation.html" target="_blank">form_validation.html</a>
            <h4>Official Documentation</h4>
            <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a>
          </div>

          <div id="fontawesome" class="pluginwrap">
            <h3>Font Awesome 4.0.3</h3>
            <p>
              The iconic font designed for use with Twitter Bootstrap
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/font-awesome/css/font-awesome.css&quot; rel=&quot;stylesheet&quot; /&gt;</pre>
            <h4>Official Documentation</h4>
            <a href="http://fortawesome.github.com/Font-Awesome/" target="_blank">http://fortawesome.github.com/Font-Awesome/</a>
          </div>

          <div id="glyphiconspro" class="pluginwrap">
            <h3>Glyphicons Pro</h3>
            <p>
              Icons are designed primarily for toolbars and navigation bars in OS X Lion, the application for iPhone, iPhone 4, iPad and other Apple devices.
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;assets/plugins/glyphicons/css/glyphicons.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;link href=&quot;assets/plugins/glyphicons_halflings/css/halflings.css&quot; rel=&quot;stylesheet&quot; /&gt;
</pre>
            <h4>Official Documentation</h4>
            <a href="http://glyphicons.com/" target="_blank">http://glyphicons.com/</a>
          </div>

          <div id="opensans" class="pluginwrap">
            <h3>Open Sans</h3>
            <p>
              Metornic uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all
            </p>
            <h4>CSS Files</h4>
            <pre class="prettyprint linenums">
&lt;link href=&quot;http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&amp;subset=all&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;</pre>
            <h4>Official Documentation</h4>
            <a href="http://www.google.com/webfonts" target="_blank">http://www.google.com/webfonts</a>
          </div>
          
        </section> 
          </div>  
        </div>    

        <div class="row">
          <div class="span12">
              <section id="references">
              <div class="page-header">
                <h1>12. References</h1>
                 <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
              </div>
              <p>
                Below is the list of all plugins and external resources used to power this template.
              </p> 
              <table class="table table-bordered table-striped" width="600">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Description</th>
                      <th>URL</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td width="300">jQuery 1.10.2</td>
                      <td>Core Javascript library</td>
                      <td><a href="http://www.jquery.com" target="_blank">http://www.jquery.com</a></td>
                    </tr>
                    <tr>
                      <td>jQuery Migrate plugin 1.2.1</td>
                      <td>jQuery Migrate plugin to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on jQuery 1.9 and later. Use the uncompressed development version to diagnose compatiblity issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings</td>
                      <td><a href="http://www.jquery.com" target="_blank">http://www.jquery.com</a></td>
                    </tr>
                    
                    <tr>
                      <td>Twitter Bootstrap v3.1.1</td>
                      <td>Sleek, intuitive, and powerful front-end framework for faster and easier web development</td>
                      <td><a href="http://getbootstrap.com" target="_blank">http://getbootstrap.com</a></td>
                    </tr>
                     <tr>
                      <td>Select2</td>
                      <td>Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results</td>
                      <td><a href="http://ivaynberg.github.io/select2/" target="_blank">http://ivaynberg.github.io/select2/</a></td>
                    </tr>

            <tr>
                      <td>Bootstrap Hover Dropdown Plugin</td>
                      <td>A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience.</td>
                      <td><a href="https://github.com/CWSpear/bootstrap-hover-dropdown" target="_blank">https://github.com/CWSpear/bootstrap-hover-dropdown</a></td>
            </tr>


            <tr>
                      <td>Twitter Typeahead</td>
                      <td>A fast and fully-featured autocomplete library.</td>
                      <td><a href="http://twitter.github.io/typeahead.js/" target="_blank">http://twitter.github.io/typeahead.js/</a></td>
            </tr>

            <tr>
                      <td>Bootstrap Select</td>
                      <td> A custom select for @twitter Bootstrap using button dropdown.</td>
                      <td><a href="http://silviomoreto.github.io/bootstrap-select/3/" target="_blank">http://silviomoreto.github.io/bootstrap-select/3/</a></td>
            </tr>

          <tr>
                      <td>jQuery Notific8</td>
                      <td>jQuery Notific8 is a notification plug-in that was inspired by the notification style introduced in Windows 8.</td>
                      <td><a href="http://willsteinmetz.net/jquery/notific8" target="_blank">http://willsteinmetz.net/jquery/notific8</a></td>
            </tr>

          <tr>
                      <td>jQuery jsTree</td>
                      <td> A tree view plugin for jQuery.</td>
                      <td><a href="http://www.jstree.com/" target="_blank">http://www.jstree.com/</a></td>
            </tr>


            <tr>
                      <td>Bootstrap Maxlength</td>
                      <td> This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. 
This plugin uses the HTML5 attribute "maxlength" to work.</td>
                      <td><a href="http://mimo84.github.com/bootstrap-maxlength/" target="_blank">http://mimo84.github.com/bootstrap-maxlength/</a></td>
            </tr>

 <tr>
                      <td>Bootstrap Session Timeout</td>
                      <td>After a set amount of time, a dialog is shown to the user with the option to either log out now, or stay connected. If log out now is selected, the page is redirected to a logout URL. If stay connected is selected, a keep-alive URL is requested through AJAX. If no options is selected after another set amount of time, the page is automatically redirected to a timeout URL.</td>
                      <td><a href="https://github.com/travishorn/jquery-sessionTimeout" target="_blank">https://github.com/travishorn/jquery-sessionTimeout</a></td>
            </tr>

          <tr>
                      <td>jQuery Idle Timeout</td>
                      <td>This script allows you to detect when a user becomes idle (detection provided by Paul Irish's idletimer plugin) and notify the user his/her session
is about to expire.  Similar to the technique seen on Mint.com.  Polling requests are automatically sent to the server at a configurable
interval, maintaining the users session while s/he is using your application for long periods of time.</td>
                      <td><a href="http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm" target="_blank">http://www.erichynds.com/examples/jquery-idle-timeout/example-mint.htm</a></td>
            </tr>



              <tr>
                      <td>Bootstrap TouchSpin</td>
                      <td>A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.</td>
                      <td><a href="http://www.virtuosoft.eu/code/bootstrap-touchspin/" target="_blank">http://www.virtuosoft.eu/code/bootstrap-touchspin/</a></td>
            </tr>

  <tr>
                      <td>Bootstrap Date Paginator</td>
                      <td>A jQuery plugin which takes Twitter Bootstrap's already great pagination component and injects a bit of date based magic. 
                      In the process creating a hugely simplified and modularised way of paging date based results in your application.</td>
                      <td><a href="http://www.jonathandanielmiles.com/bootstrap-datepaginator/" target="_blank">http://www.jonathandanielmiles.com/bootstrap-datepaginator/</a></td>
            </tr>

              <tr>
                      <td>Bootbox.js</td>
                      <td>Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, 
            without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.</td>
                      <td><a href="http://bootboxjs.com/" target="_blank">http://bootboxjs.com/</a></td>
            </tr>

 <tr>
                      <td>Bootstrap Markdown</td>
                      <td>Markdown editing for Bootstrap.</td>
                      <td><a href="http://toopay.github.com/bootstrap-markdown/" target="_blank">http://toopay.github.com/bootstrap-markdown/</a></td>
            </tr>

             <tr>
                      <td>MixItUp - A CSS3 and jQuery Filter & Sort Plugin</td>
                      <td>MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It's perfect for portfolios, galleries, blogs, or any categorized or ordered content!</td>
                      <td><a href="http://mixitup.io" target="_blank">http://mixitup.io</a></td>
            </tr>


             <tr>
                      <td>Bootstrap FuelUX Input Spinner</td>
                      <td>Bootstrap FuelUX Input Spinner For Metronic.</td>
                      <td><a href="http://exacttarget.github.io/fuelux/#spinner" target="_blank">http://exacttarget.github.io/fuelux/#spinner</a></td>
            </tr>



   <tr>
                      <td>jQuery noUiSlider</td>
                      <td>noUiSlider is a super tiny jQuery plugin that allows you to create range sliders.  
            It fully supports touch, and it is way(!) less bloated than the jQueryUI library.</td>
                      <td><a href="http://refreshless.com/nouislider/" target="_blank">http://refreshless.com/nouislider/</a></td>
            </tr>

   <tr>
                      <td>jQuery IonRange Slider</td>
                      <td> Beautiful, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings and can be completely modified with CSS.</td>
                      <td><a href="http://ionden.com/a/plugins/ion.rangeSlider/" target="_blank">http://ionden.com/a/plugins/ion.rangeSlider/</a></td>
            </tr>

   <tr>
                      <td>Bootstrap Toastr Notifications</td>
                      <td> Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.</td>
                      <td><a href="http://codeseven.github.io/toastr/demo.html" target="_blank">http://codeseven.github.io/toastr/demo.html</a></td>
            </tr>


             <tr>
                      <td>Bootstrap Switch</td>
                      <td>Use Radio Buttons as switches.</td>
                      <td><a href="http://www.larentis.eu/switch/" target="_blank">http://www.larentis.eu/switch/</a></td>
            </tr>


            <tr>
                      <td>jQuery jCrop</td>
                      <td>Jcrop is the quick and easy way to add image cropping functionality to
your web application. It combines the ease-of-use of a typical jQuery
plugin with a powerful cross-platform DHTML cropping engine that is
faithful to familiar desktop graphics applications.</td>
                      <td><a href="http://github.com/tapmodo/Jcrop" target="_blank">http://github.com/tapmodo/Jcrop</a></td>
            </tr>

             <tr>
                      <td>Bootstrap X-editable</td>
                      <td> In-place editing with Twitter Bootstrap.</td>
                      <td><a href="http://vitalets.github.io/x-editable/demo.html" target="_blank">http://vitalets.github.io/x-editable/demo.html</a></td>
                    </tr>

               <tr>
                      <td>Bootstrap Extended Modals</td>
                      <td>Responsive, Stackable, AJAX and more.</td>
                      <td><a href="http://jschr.github.com/bootstrap-modal/" target="_blank">http://jschr.github.com/bootstrap-modal/</a></td>
                    </tr>

                     

                    <tr>
                      <td>jQuery Multi Select</td>
                      <td> This plugin is a drop-in replacement for the standard select element with multiple attribute activated.</td>
                      <td><a href="http://loudev.com/" target="_blank">http://loudev.com/</a></td>
                    </tr>

                    <tr>
                      <td>jQuery Sparklines</td>
                      <td>This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.</td>
                      <td><a href="http://omnipotent.net/jquery.sparkline" target="_blank">http://omnipotent.net/jquery.sparkline</a></td>
                    </tr>


                     <tr>
                      <td>jQuery Input Mask</td>
                      <td>jQuery Input Mask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers.</td>
                      <td><a href="http://github.com/RobinHerbots/jquery.inputmask" target="_blank">http://github.com/RobinHerbots/jquery.inputmask</a></td>
                    </tr>
                     <tr>
                      <td>jQuery Easy Pie Chart</td>
                      <td>Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element</td>
                      <td><a href="http://rendro.github.io/easy-pie-chart/" target="_blank">http://rendro.github.io/easy-pie-chart/</a></td>
                    </tr>
                     <tr>
                      <td>jQuery Input IP Address Control</td>
                      <td>During user input field, this plugin controls the format of IPv4 or IPv6 addresses.</td>
                      <td><a href="https://code.google.com/p/jquery-input-ip-address-control" target="_blank">https://code.google.com/p/jquery-input-ip-address-control</a></td>
                    </tr>

                    <tr>
                      <td>jQuery UI Sliders</td>
                      <td>jQuery UI Sliders</td>
                      <td><a href="http://jqueryui.com/slider/" target="_blank">http://jqueryui.com/slider/</a></td>
                    </tr>
                    <tr>
                      <td>jQuery UI Sortable</td>
                      <td>jQuery UI Sortable</td>
                      <td><a href="http://jqueryui.com/sortable/" target="_blank">http://jqueryui.com/sortable/</a></td>
                    </tr>  

                    <tr>
                      <td>Pace - Page Progress Bar</td>
                      <td>n automatic web page progress bar. Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress. For more info check the plugin documentation.</td>
                      <td><a href="http://github.hubspot.com/pace" target="_blank">http://github.hubspot.com/pace</a></td>
                    </tr>                
                    <tr>
                      <td>jQuery BlockUI</td>
                      <td>The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser</td>
                      <td><a href="http://jquery.malsup.com/block/" target="_blank">http://jquery.malsup.com/block/</a></td>
                    </tr>

                    <tr>
                      <td>jQuery Cookie</td>
                      <td>A simple, lightweight jQuery plugin for reading, writing and deleting cookies.</td>
                      <td><a href="https://github.com/carhartl/jquery-cookie" target="_blank">https://github.com/carhartl/jquery-cookie</a></td>
                    </tr>
                    <tr>
                      <td>jQuery Pulsate</td>
                      <td>jQuery Pulsate provides animated pulsating effect that's useful for focussing attention to a certain part 
                        of your webpage in a subtle way.</td>
                      <td><a href="http://kilianvalkhof.com/jquerypulsate/" target="_blank">http://kilianvalkhof.com/jquerypulsate/</a></td>
                    </tr>
                    <tr>
                      <td>Respond</td>
                      <td>A fast & lightweight polyfill for min/max-width and CSS3 Media Queries (for IE 6-8, and more)</td>
                      <td><a href="https://github.com/scottjehl/Respond" target="_blank">https://github.com/scottjehl/Respond</a></td>
                    </tr>
                    <tr>
                      <td>Excanvas</td>
                      <td>Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages</td>
                      <td><a href="http://excanvas.sourceforge.net/" target="_blank">http://excanvas.sourceforge.net/</a></td>
                    </tr>

                     <tr>
                      <td>jQuery Backstretch</td>
                      <td>A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.</td>
                      <td><a href="http://srobbin.com/jquery-plugins/backstretch/" target="_blank">http://srobbin.com/jquery-plugins/backstretch/</a></td>
                    </tr>

                    <tr>
                      <td>jQuery Countdown</td>
                      <td>A jQuery plugin that sets a div or span to show a countdown to a given time.</td>
                      <td><a href="http://keith-wood.name/countdown.html" target="_blank">http://keith-wood.name/countdown.html</a></td>
                    </tr>

                     <tr>
                      <td>jQuery Bootpad for Bootstrap</td>
                      <td>Dynamic pagination jQuery plugin. Works well with twitter bootstrap or standalone.</td>
                      <td><a href="http://botmonster.com/jquery-bootpag/" target="_blank">http://botmonster.com/jquery-bootpag/</a></td>
                    </tr>

                    <tr>
                      <td>Colorpicker for Bootstrap</td>
                      <td>Add color picker to field or to any other element</td>
                      <td><a href="http://www.eyecon.ro/bootstrap-colorpicker/" target="_blank">http://www.eyecon.ro/bootstrap-colorpicker/</a></td>
                    </tr>
                    <tr>
                      <td>Datepicker for Bootstrap</td>
                      <td>Add datepicker picker to field or to any other element</td>
                      <td><a href="https://github.com/eternicode/bootstrap-datepicker" target="_blank">https://github.com/eternicode/bootstrap-datepicker</a></td>
                    </tr>
                    <tr>
                      <td>Bootstrap Datetimepicker</td>
                      <td>This project is a fork of bootstrap-datetimepicker project which doesn't include Time part.
Some others parts has been improved as for example the load process which now accepts the ISO-8601 format.</td>
                      <td><a href="http://www.malot.fr/bootstrap-datetimepicker/" target="_blank">http://www.malot.fr/bootstrap-datetimepicker/</a></td>
                    </tr>
                    <tr>
                      <td>Date Range Picker for Bootstrap</td>
                      <td>This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates
                      </td>
                      <td><a href="https://github.com/dangrossman/bootstrap-daterangepicker" target="_blank">https://github.com/dangrossman/bootstrap-daterangepicker</a></td>
                    </tr>
                    <tr>
                      <td>Bootstrap Timepicker</td>
                      <td>Easily select a time for a text input using your mouse or keyboards arrow keys.</td>
                      <td><a href="http://jdewit.github.com/bootstrap-timepicker/" target="_blank">http://jdewit.github.com/bootstrap-timepicker/</a></td>
                    </tr>
                    <tr>
                      <td>Clockface Timepicker</td>
                      <td>Clockface is a simple timepicker for Twitter Bootstrap</td>
                      <td><a href="http://vitalets.github.com/clockface/" target="_blank">http://vitalets.github.com/clockface/</a></td>
                    </tr>
                    <tr>
                      <td>jQuery Tags Input</td>
                      <td>Magically convert a simple text input into a cool tag list with this jQuery plugin</td>
                      <td><a href="https://github.com/xoxco/jQuery-Tags-Input" target="_blank">https://github.com/xoxco/jQuery-Tags-Input</a></td>
                    </tr>
                    <tr>
                      <td>Bootstrap WYSIWYG5</td>
                      <td>Simple WYSIWYG Editor for Bootstrap</td>
                      <td><a href="http://jhollingworth.github.com/bootstrap-wysihtml5/" target="_blank">http://jhollingworth.github.com/bootstrap-wysihtml5/</a></td>
                    </tr>
                    <tr>
                      <td>CKEditor</td>
                      <td>CKEditor is a ready-for-use HTML text editor designed to simplify web content creation</td>
                      <td><a href="http://ckeditor.com/" target="_blank">http://ckeditor.com/</a></td>
                    </tr>
                    <tr>
                      <td>DataTables</td>
                      <td>DataTables for Twitter Bootstrap</td>
                      <td><a href="http://www.datatables.net/blog/Twitter_Bootstrap_2" target="_blank">http://www.datatables.net/blog/Twitter_Bootstrap_2</a></td>
                    </tr>
                     <tr>
                      <td>Bootstrap File Input</td>
                      <td>The file upload plugin allows you to create a visually appealing file or image upload widgets</td>
                      <td><a href="http://jasny.github.io/bootstrap/javascript/#fileinput" target="_blank">http://jasny.github.io/bootstrap/javascript/#fileinput</a></td>
                    </tr>
                    <tr>
                      <td>FancyBox</td>
                      <td>FancyBox is a tool for displaying images, html content and multi-media</td>
                      <td><a href="http://fancybox.net/" target="_blank">http://fancybox.net/</a></td>
                    </tr>
                     <tr>
                      <td>Flot</td>
                      <td>Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.</td>
                      <td><a href="http://www.flotcharts.org/" target="_blank">http://www.flotcharts.org/</a></td>
                    </tr>
                    <tr>
                      <td>gmaps.js</td>
                      <td>gmaps.js allows you to use the potential of Google Maps in a simple way.
                          No more extensive documentation or large amount of code
                      </td>
                      <td><a href="http://hpneo.github.com/gmaps/" target="_blank">http://hpneo.github.com/gmaps/</a></td>
                    </tr>
                     <tr>
                      <td>FullCalendar</td>
                      <td>FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar</td>
                      <td><a href="http://arshaw.com/fullcalendar/" target="_blank">http://arshaw.com/fullcalendar/</a></td>
                    </tr>
                     <tr>
                      <td>Gritter Notifications</td>
                      <td>The super awesome background is just to show you that all notifications are transparent</td>
                      <td><a href="http://boedesign.com/demos/gritter/" target="_blank">http://boedesign.com/demos/gritter/</a></td>
                    </tr>
                     <tr>
                      <td>jQuery slimScroll</td>
                      <td>slimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar </td>
                      <td><a href="http://rocha.la/jQuery-slimScroll" target="_blank">http://rocha.la/jQuery-slimScroll</a></td>
                    </tr>
                     <tr>
                      <td>JQVMAP</td>
                      <td>JQVMap is a jQuery plugin that renders Vector Maps.  It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.  Legacy support for older versions of Internet Explorer 6-8 is provided via VML.</td>
                      <td><a href="http://jqvmap.com/" target="_blank">http://jqvmap.com/</a></td>
                    </tr>
                     <tr>
                      <td>Uniform</td>
                      <td>Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility</td>
                      <td><a href="http://uniformjs.com/" target="_blank">http://uniformjs.com/</a></td>
                    </tr>
                     <tr>
                      <td>jQuery File Upload</td>
                      <td>File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery</td>
                      <td><a href="http://blueimp.github.com/jQuery-File-Upload/" target="_blank">http://blueimp.github.com/jQuery-File-Upload/</a></td>
                    </tr>
                    <tr>
                      <td>DropzoneJS</td>
                      <td>DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.</td>
                      <td><a href="http://touchpunch.furf.com/" target="_blank">http://www.dropzonejs.com/</a></td>
                    </tr>
                    <tr>
                      <td>jQuery UI Touch Punch</td>
                      <td>jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.</td>
                      <td><a href="http://touchpunch.furf.com/" target="_blank">http://touchpunch.furf.com/</a></td>
                    </tr>
                      <tr>
                      <td>Bootstrap Form Wizard</td>
                      <td>This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.</td>
                      <td><a href="https://github.com/VinceG/twitter-bootstrap-wizard" target="_blank">https://github.com/VinceG/twitter-bootstrap-wizard</a></td>
                    </tr>


                    <tr>
                      <td>Nestable</td>
                      <td>Drag & drop hierarchical list with mouse and touch compatibility.</td>
                      <td><a href="https://github.com/dbushell/Nestable" target="_blank">https://github.com/dbushell/Nestable</a></td>
                    </tr> 
                      <tr>
                      <td>jQuery Validation Plugin</td>
                      <td>The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy</td>
                      <td><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a></td>
                    </tr>                  

                     <tr>
                      <td>Ink - Responsive Email Template Framework</td>
                      <td>Quickly create responsive HTML emails that work on any device & client. Even Outlook.</td>
                      <td><a href="http://zurb.com/ink/" target="_blank">http://zurb.com/ink/</a></td>
                    </tr>
                    <tr>
                      <td>FontAwesome</td>
                      <td>The iconic font designed for use with Twitter Bootstrap</td>
                      <td><a href="http://fortawesome.github.com/Font-Awesome/" target="_blank">http://fortawesome.github.com/Font-Awesome/</a></td>
                    </tr>
                     <tr>
                      <td>Glyphicons Pro</td>
                      <td>Icons are designed primarily for toolbars and navigation bars in OS X Lion, the application for iPhone, iPhone 4, iPad and other Apple devices.</td>
                      <td><a href="http://glyphicons.com/" target="_blank">http://glyphicons.com/</a></td>
                    </tr>                    
                    <tr>
                      <td>Open Sans</td>
                      <td>
                        Metornic uses Open Sans web font from google fonts:
                        http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all</td>
                      <td><a href="http://www.google.com/webfonts" target="_blank">http://www.google.com/webfonts</a></td>
                    </tr>
                  </tbody>
               </table>     
              </section> 
          </div>  
        </div>    

        <div class="row">
          <div class="span12">
              <section id="log">
                <div class="page-header">
                    <h1>13. Change Log</h1>
                    <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
                </div>

                <h4>Version 2.0.2 – 20 February 2014(Both LTR and RTL versions)</h4>
                <ul>        
                    <li>
                       FIX: Fix Google Fonts Load Issue
                       <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                        </ul>
                    </li>
                    <li>
                       FIX: Badge Position Issue On Closed Sidebar Menu
                       <ul>  
                          <li>Modified css file: <code>style-responsive.css</code></li>
                        </ul>
                    </li>
                </ul>
                <br>

                <h4>Version 2.0.1 – 19 February 2014(Both LTR and RTL versions)</h4>
                <ul>        
                    <li>
                       NEW: Pace - Page Progress Bar
                       <ul>  
                          <li>Added plugin folder: <code>assets/plugins/pace/</code></li>
                          <li>Added html file: <code>ui_page_progress_style_1.html</code></li>
                          <li>Added html file: <code>ui_page_progress_style_2.html</code></li>
                          <li>Added html file: <code>ui_page_progress_style_3.html</code></li>
                          <li>Added html file: <code>ui_page_progress_style_4.html</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest Bootstrap 3.1.1
                        <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap/</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest jQuery MultiSelect 
                        <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/jquery-multi-select/</code></li>
                        </ul>
                    </li>
                    <li>
                       IMPROVEMENT: Sidebar Menu Configuration Through HTML Attributes
                       <ul>  
                          <li>Added configuration options: <code>data-auto-scroll="true|false"</code> and <code>data-slide-speed="200"</code></li>
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                        </ul>
                    <li>
                       IMPROVEMENT: Some Documentation Improvemements & Corrections.
                    </li> 
                    <li>
                        FIX: Responsive Mega Menu Issue on Mobile
                        <ul>  
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                          <li>Modified html file: <code>index_horizontal_menu.html</code></li>
                          <li>Modified html file: <code>layout_horizontal_menu1.html</code></li>
                          <li>Modified html file: <code>layout_horizontal_menu2.html</code></li>
                          <li>Modified html file: <code>layout_horizontal_sidebar_menu.html</code></li>
                        </ul>
                    </li>
                     <li>
                        FIX: Missing Icons in Fontawesome 4.0.3 & Glypicons Examples
                        <ul>  
                          <li>Modified html file: <code>ui_buttons.html</code></li>
                        </ul>
                    </li>
                     <li>
                        FIX: Custom File Input Plugin Issue In extra_profile.html Page
                        <ul>  
                          <li>Modified html file: <code>extra_profile.html</code></li>
                        </ul>
                    </li>
                    <li>
                        FIX: Missing "markdown.js" Required By Bootstrap Markdown Plugin
                        <ul>  
                          <li>Added new javascript file: <code>assets/plugins/bootstrap-markdown/lib/markdown.js</code></li>
                          <li>Modified html file: <code>components_editors.html</code></li>
                        </ul>
                    </li>
                    <li>
                        DROPPED: Metronic v1.4 version has been dropped from the package.
                    </li>                       
                </ul>
                <br>

                <h4>Version 2.0 – 12 February 2014(Both LTR and RTL versions)</h4>
                <ul>        
                    <li>
                       NEW: E-Commerce Admin Pages
                       <ul>  
                          <li>Added new html file: <code>ecommerce_index.html</code></li>
                          <li>Added new html file: <code>ecommerce_orders.html</code></li>
                          <li>Added new html file: <code>ecommerce_orders_view.html</code></li>
                          <li>Added new html file: <code>ecommerce_products.html</code></li>
                          <li>Added new html file: <code>ecommerce_products_edit.html</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                        </ul>
                    </li>            
                    <li>
                       NEW: jQuery jsTree Plugin Integration
                       <ul>  
                          <li>Added plugin folder: <code>assets/plugins/jstree/</code></li>
                          <li>Updated html file: <code>ui_tree.html</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/custom/ui-tree.js</code></li>
                        </ul>
                    </li>
                    <li>
                       NEW: Advance Ajax Datagrid Component Based on Datatabble Plugin
                       <ul>  
                          <li>Added js file: <code>assets/scripts/core/datatable.js</code></li>                          
                          <li>Updated plugin folder: <code>assets/plugins/data-tables/</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                          <li>Updated html file: <code>table_ajax.html</code></li>
                        </ul>
                    </li>
                    <li>
                       NEW: Responsive Multipurpose Email Templates
                       <ul>  
                          <li>Added html file: <code>email_newsletter.html</code></li>
                          <li>Added html file: <code>email_system.html</code></li>
                        </ul>
                    </li>
                    <li>
                       NEW: Mega Menu In Horizontal Menu
                       <ul>  
                          <li>Updated html file: <code>index_horizontal_menu.html</code></li>
                          <li>Updated html file: <code>layout_horizontal_menu1.html</code></li>
                          <li>Updated html file: <code>layout_horizontal_menu2.html</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                          <li>Modified css files: <code>assets/css/theme/*</code></li>
                          <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                       NEW: Twitter Typeahead Plugin Integration
                       <ul>  
                          <li>Added plugin folder: <code>assets/plugins/typeahead/</code></li>
                          <li>Updated html file: <code>components_form_tools.html</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/custom/components-form-tools.js</code></li>
                        </ul>
                    </li>
                    <li>
                       NEW: jQuery Notific8 Plugin Integration
                       <ul>  
                          <li>Added plugin folder: <code>assets/plugins/jquery-notific8/</code></li>
                          <li>Added html file: <code>ui_notific8.html</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/custom/ui-notific8.js</code></li>
                        </ul>
                    </li>
                    <li>
                       NEW: Bootstrap Select Plugin Integration
                       <ul>  
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-select/</code></li>
                          <li>Added html file: <code>components_dropdowns.html</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/custom/components-dropdowns.js</code></li>
                        </ul>
                    </li>
                    <li>
                       NEW: Metronic's API For Bootstrap Modals
                       <ul>  
                          <li>Updated html file: <code>ui_alert_dialog_api.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                          <li>Modified javascript file: <code>assets/scripts/custom/ui-alert-dialog-api.js</code></li>
                        </ul>
                    </li>
                    <li>
                       NEW: Ajax Portlets
                       <ul>  
                          <li>Added html file: <code>portlet_ajax.html</code></li>                          
                          <li>Added javascript file: <code>assets/scripts/custom/portlet-ajax.js</code></li>
                          <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                       NEW: jQuery BlockUI Samples
                       <ul>  
                          <li>Added html file: <code>ui_blockui.html</code></li>                          
                          <li>Added javascript file: <code>assets/scripts/custom/ui-blockui.js</code></li>
                          <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: 11 PSD Files
                        <ul>  
                          <li>Added PSD file: <code>admin/resources/theme_psd/extra_profile.psd</code></li>                          
                        </ul>
                        <ul>  
                          <li>Added PSD file: <code>admin/resources/theme_psd/form_component_part1.psd</code></li>                          
                        </ul>
                        <ul>  
                          <li>Added PSD file: <code>admin/resources/theme_psd/form_component_part2.psd</code></li>                          
                        </ul>
                        <ul>  
                          <li>Added PSD file: <code>admin/resources/theme_psd/form_controls.psd</code></li>                          
                        </ul>
                        <ul>  
                          <li>Added PSD file: <code>admin/resources/theme_psd/layout_horizontal_menu2.psd</code></li>                          
                        </ul>
                        <ul>  
                          <li>Added PSD file: <code>admin/resources/theme_psd/page_timeline.psd</code></li>                          
                        </ul>
                        <ul>  
                          <li>Added PSD file: <code>admin/resources/theme_psd/table_basic.psd</code></li>                          
                        </ul>
                        <ul>  
                          <li>Added PSD file: <code>admin/resources/theme_psd/table_managed.psd</code></li>                          
                        </ul>
                        <ul>  
                          <li>Added PSD file: <code>admin/resources/theme_psd/ui_buttons.psd</code></li>                          
                        </ul>
                        <ul>  
                          <li>Added PSD file: <code>admin/resources/theme_psd/ui_general.psd</code></li>                          
                        </ul>
                        <ul>  
                          <li>Added PSD file: <code>admin/resources/theme_psd/ui_tabs_accordions_navs.psd</code></li>                          
                        </ul>
                    </li>
                     <li>
                       IMPROVEMENT: Redesigned Search Box on Header 
                       <ul>  
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css files: <code>assets/css/themes/*</code></li>
                          <li>Modified html file: <code>layout_search_on_header.html</code></li>
                        </ul>
                    </li>
                    <li>
                       IMPROVEMENT: Enable Login Links Via Facebook, Twitter, Google+ & Linkedin 
                       <ul>  
                          <li>Modified html file: <code>login.html</code></li>
                          <li>Modified html file: <code>login_soft.html</code></li>
                        </ul>
                    </li>
                     <li>
                       IMPROVEMENT: Inline Help For Form Inputs 
                       <ul>  
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css file: <code>assets/css/style-metronic.css</code></li>
                          <li>Modified html file: <code>form_controls.html</code></li>
                        </ul>
                    </li>
                    <li>
                       IMPROVEMENT: Right Aligned Tabs 
                       <ul>  
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified html file: <code>ui_tabs_accordions_navs.html</code></li>
                        </ul>
                    </li>
                    <li>
                       IMPROVEMENT: Load Open Sans Font In HTML Head(before the rest of css files) 
                       <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                       IMPROVEMENT: Bootstrap Accordions With Icons(plus/minus)
                       <ul>  
                          <li>Modified html file: <code>ui_tabs_accordions_navs.html</code></li>
                          <li>Modified css file: <code>assets/css/style-metronic.css</code></li>
                        </ul>
                    </li>
                    <li>
                       IMPROVEMENT: Restyled Flot Charts
                       <ul>  
                          <li>Modified javascript file: <code>assets/scripts/custom/index.js</code></li>
                          <li>Modified javascript file: <code>assets/scripts/custom/charts.js</code></li>
                        </ul>
                    </li>
                    <li>
                        IMPROVEMENT: Enable Ajax Links Within Page Content
                        <ul>  
                          <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                       IMPROVEMENT: New Social Icons(flickr, foursquare, gravatar, klout, myspace, quora)
                       <ul>  
                          <li>Modified html file: <code>ui_buttons.html</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        CHANGE: Javascript File Path
                        <ul>  
                          <li>Core scripts folder: <code>assets/plugins/scripts/core/</code></li>
                          <li>Custom page level scripts Folder: <code>assets/plugins/scripts/custom/</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest Bootstrap 3.1.0
                        <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap/</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest Fontawesome 4.0.3
                        <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/font-awesome/</code></li>
                        </ul>
                    </li>                    
                    <li>
                       UPGRADE: Latest jQuery Slimscroll Plugin 
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/jquery-slimscroll/</code></li>
                          <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest jQuery Bootpag Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/jquery-bootpag/</code></li>
                        </ul>
                    </li>
                     <li>
                       UPGRADE: Latest jQuery Gmaps Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/gmaps/</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest jQuery Uniform Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/uniform/</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                        </ul>
                    </li>
                     <li>
                       UPGRADE: Latest jQuery File Upload Plugin 
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/jquery-file-upload/</code></li>
                          <li>Modified html file: <code>form_fileupload.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/custom/form-fileupload.js</code></li>
                        </ul>
                    </li>
                     <li>
                       UPGRADE: Latest Select2 Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/select2/</code></li>
                          <li>Modified html file: <code>components_dropdowns.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/custom/components-dropdowns.js</code></li>
                        </ul>
                    </li>
                     <li>
                       UPGRADE: Latest Jasny Bootstrap File Input Plugin
                       <ul>  
                          <li>New plugin folder: <code>assets/plugins/bootstrap-fileinput/</code></li>
                          <li>Modified html file: <code>components_form_tools.html</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest jQuery Input Mask Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/jquery-inputmask/</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest Bootstrap Hower Dropdown Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap-hover-dropdown/</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest Bootstrap Makrdown Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap-markdown/</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest Bootstrap Switch Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap-switch/</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest Bootstrap Wizard Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap-wizard/</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest Bootstrap Touchspin Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap-touchspin/</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest Bootstrap Modal Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap-modal/</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest Bootstrap Timepicker Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap-timepicker/</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest Bootstrap Daterangepicker Plugin
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap-daterangepicker/</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest Moment.js Plugin
                       <ul>  
                          <li>Updated plugin file: <code>assets/plugins/moment.min.js</code></li>
                        </ul>
                    </li>
                    <li>
                       UPGRADE: Latest jQuery BlockUI Plugin
                       <ul>  
                          <li>Updated plugin file: <code>assets/plugins/jquery.blockui.min.js</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                       FIX: Broken Horizontal Menu On 1024px Resolution
                       <ul>  
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                        </ul>
                    </li>
                    <li>
                        FIX: Tiles Aligment Issue On Ipad's Portraits Mode
                        <ul>  
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                       FIX: Content Height And Footer Position Issue
                       <ul>  
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/core/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                       FIX: Dropdown Aligment Issue In Portlet Actions Bar On Safari
                       <ul>  
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                      DROPPED: Non-responsive Email Templates 
                       <ul>  
                          <li>Removed html files: <code>email1.html</code>, <code>email2.html</code>, <code>email3.html</code>, <code>email4.html</code>, <code>email5.html</code>, <code>email6.html</code></li>
                        </ul>
                    </li>
                </ul>
                <br>

                <h4>Version 1.5.5 – 9 December 2013(Both LTR and RTL versions)</h4>
                <ul>
                    <li>
                        UPDATE: Bootstrap 3.0.3
                         <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: 5 PSD Files(Dashboard Page, Email Template, Login page, User Locked Page, Invoice Page)
                         <ul>  
                          <li>Added PSD files: <code>admin/resources/theme_psd/</code></li>
                        </ul>
                    </li>
                   <li>
                       NEW: Right Sidebar Layout Option(check the theme configuration panel)
                       <ul>  
                          <li>Added html file: <code>layout_sidebar_reversed.html</code></li>
                          <li>Modified html files(refer page-sidebar-wrapper and page-content-wrapper divs): <code>all HTML files</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                       NEW: Search on Header Layout Option
                       <ul>  
                          <li>Added html file: <code>layout_search_on_header.html</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                       NEW: Bootstrap Style Full Number Pagination For Datetable Plugin 
                       <ul>  
                          <li>Modified html file: <code>table_ajax.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/table-ajax.js</code></li>
                          <li>Updated plugin folder: <code>assets/css/data-tables/</code></li>
                        </ul>
                    </li>                    
                    <li>
                       ENHANCEMENT: Prevent Blocking jquery.cookie.min.js by ModSecurity by changing plugin filename to jquery.cokie.min.js
                       <ul>  
                          <li>Change plugin file name: <code>jquery.cokie.min.js</code></li>
                          <li>Updates html files: <code>all HTML files</code></li>
                        </ul>
                    </li>
                     <li>
                       UPDATE: jQuery Countdown Plugin v1.6.3
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/countdown</code></li>
                        </ul>
                    </li>
                    <li>
                       FIX: Coming Soon Page Counter Issue on Safari/Mac 
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/countdown</code></li>
                        </ul>
                    </li>
                    <li>
                       FIX: Responsive Project List Issue on User Profile Page 
                       <ul>  
                          <li>Modified html file: <code>extra_profile.html</code></li>
                          <li>Modified css file: <code>assets/css/pages/profile.css</code></li>
                        </ul>
                    </li>
                     <li>
                       FIX: Managed Datatable Group Check/Uncheck Issue.
                        <ul>  
                          <li>Modified javascript file: <code>assets/scripts/table-managed.js</code></li>
                        </ul>
                    </li>
                     <li>
                       FIX: Content Height Issue On Sidebar Expand in Sidebar Closed Page.
                        <ul>  
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                       FIX: Clockface Timepicker z-index issue in Modals.
                       <ul>  
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                        </ul>
                    </li>
                    <li>
                       FIX: Bootstrap Wysihtml5 Insert URL Issue.
                       <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap-wysihtml5/</code></li>
                        </ul>
                    </li>
                </ul>
                <br>
                <br>

                 <h4>Version 1.5.4 – 21 November 2013(Both LTR and RTL versions)</h4>
                <ul>
                    <li>
                        Update: Bootstrap 3.0.2 Update
                         <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Dashboard With Horizontal Menu
                         <ul>  
                          <li>Added html file: <code>index_horizontal_menu.html</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: User Session Timeout Plugin Integration
                         <ul>  
                          <li>Added html file: <code>layout_session_timeout.html</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-sessiontimeout/</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: User Idle Timeout Plugin Integration
                         <ul>  
                          <li>Added html file: <code>layout_idle_timeout.html</code></li>
                          <li>Added plugin folder: <code>assets/plugins/jquery-idle-timeout/</code></li>
                          <li>Added javascript file: <code>assets/scripts/idle-timeout.js</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Sidebar Toggler Button On Header
                         <ul>  
                          <li>Modified style files: <code>assets/css/style.css</code>, <code>assets/css/style-responsive.css</code></li>
                          <li>Added html file: <code>layout_sidebar_toggler_on_header.html</code></li>
                          <li>Modified javascript file folder: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Ajax Datatable Integration
                         <ul>  
                          <li>Added html file: <code>table_ajax.html</code></li>
                          <li>Updated plugin folder: <code>assets/plugins/data-tables/</code></li>
                          <li>Added javascript file: <code>assets/scripts/table-ajax.js</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: jQuery Flot Bar Chart Samples
                         <ul>  
                          <li>Modified html file: <code>charts.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/charts.js</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Button Dropdown Menu with Search box
                         <ul>  
                          <li>Modified html file: <code>ui_bottons.html</code></li>
                          <li>Modified style file: <code>assets/css/style-metronic.css</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Datepicker with Disabled Past Dates
                         <ul>  
                          <li>Modified html file: <code>form_component.html</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Bootstrap Modal Issue(when modal opened the page content shifts to the right)
                         <ul>  
                          <li>Modified style files: <code>assets/css/style.css</code>, <code>assets/css/style-metronic.css</code>, <code>assets/css/plugins.css</code></li>
                          <li>Modified html file: <code>ui_modals.html</code></li>
                          <li>Modified html file: <code>ui_extended_modals.html</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Bootstrap TouchSpin spinUpClass Parameter Issue 
                         <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap-touchspin/</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Bootstrap Tab Activation Through URL Issue(parent tabs are not activated) 
                         <ul>  
                          <li>Modified javascript file folder: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Bootstrap WYSIWYG5 Modal Dialogs Issue(duplicated modal containers when bootstrap modal plugin used) 
                         <ul>  
                          <li>Updated plugin folder: <code>assets/plugins/bootstrap-wysihtml5/</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Selected Theme Color Not Applied To Horizontal Menu 
                         <ul>  
                          <li>Updated styles folder: <code>assets/css/themes/</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Login Form Submit Issue 
                         <ul>  
                          <li>Modified javascript file: <code>assets/scripts/login.js</code></li>
                          <li>Modified javascript file: <code>assets/scripts/login-soft.js</code></li>
                        </ul>
                    </li>
                </ul>

                <br>
                <br>

                 <h4>Version 1.5.3 – 7 November 2013(Both LTR and RTL versions)</h4>
                <ul>
                    <li>
                        NEW: Bootstrap TouchSpin Plugin Integration
                         <ul>  
                          <li>Modified html file: <code>form_component.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form_components.js</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-touchspin/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Bootstrap Date Paginator Plugin Integration
                         <ul>  
                          <li>Added html file: <code>ui_datepaginator.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/ui_bootbox.js</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-datepaginator/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Bootbox.js Plugin Integration
                         <ul>  
                          <li>Added html file: <code>ui_bootbox.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/ui_bootbox.js</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootbox/</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Input Group, Icon Input, Markdown Input Validation Samples
                         <ul>  
                          <li>Modified html file: <code>form_validation.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form-validation.js</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Form Input Validation Samples 
                         <ul>  
                          <li>Modified html file: <code>form_validation.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form-validation.js</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Button Dropdown Menu With Multilevel Submenu
                        <ul>  
                          <li>Modified html file: <code>ui_buttons.html</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css file: <code>assets/css/style-metronic.css</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Bootstrap Switch Samples with Long Text.
                         <ul>  
                          <li>Modified html file: <code>form_component.html</code></li>
                        </ul>
                    </li>
                    <li>
                        UPDATE: Font Awesome 4.0.1
                         <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Modified css file: <code>style.css</code></li>
                          <li>Modified css file: <code>style-metronic.css</code></li>
                          <li>Modified css file: <code>plugins.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/ui_bootbox.js</code></li>
                          <li>Modified plugin folder: <code>assets/plugins/bootstrap-datepaginator/</code></li>
                          <li>Modified plugin folder: <code>assets/plugins/bootstrap-datepicker/</code></li>
                          <li>Modified plugin folder: <code>assets/plugins/bootstrap-daterangepicker/</code></li>
                          <li>Modified plugin folder: <code>assets/plugins/bootstrap-datetimepicker/</code></li>
                          <li>Modified plugin folder: <code>assets/plugins/bootstrap-editable/</code></li>
                          <li>Modified plugin folder: <code>assets/plugins/bootstrap-timepicker/</code></li>
                          <li>Modified plugin folder: <code>assets/plugins/bootstrap-wysihtml5/</code></li>
                          <li>Modified plugin folder: <code>assets/plugins/bootstrap-fuelux/</code></li>
                          <li>Updated plugin folder: <code>assets/plugins/font-awesome/</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Main Content Height Issue with Fixed Layout on Large Screens
                         <ul>  
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Language Switch Bar Layout Issue on Mobile Devices 
                         <ul>  
                          <li>Modified css file: <code>assets/css/style-responsive.css</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Image Crop Samples Issue on 1024 screen resolution
                         <ul>  
                          <li>Modified html file: <code>form_image_crop.html</code></li>
                          <li>Modified css file: <code>assets/css/pages/image-crop.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form-image-crop.js</code></li>
                        </ul>
                    </li>
                </ul>
                <br>

                <h4>Version 1.5.2 – 21 October 2013(Both LTR and RTL versions)</h4>
                <ul>
                    <li>
                        NEW: Bootstrap Maxlength Plugin Integration
                         <ul>  
                          <li>Modified html file: <code>form_component.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form_components.js</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-maxlength/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Bootstrap Markdown Editor Plugin Integration
                         <ul>  
                          <li>Modified html file: <code>form_component.html</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-markdown/</code></li>
                        </ul>
                    </li>
                     <li>
                        ENHANCEMENT: Horizontal Scrollable Datatables Adaptable To Any Device Width.
                         <ul>  
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                          <li>Updated plugin folder: <code>assets/plugins/date-tables/</code></li>
                        </ul>
                    </li>
                     <li>
                        ENHANCEMENT: Clickable Form Wizard Steps
                         <ul>  
                          <li>Modified javascript file: <code>assets/scripts/form_wizard.js</code></li>
                        </ul>
                    </li>
                     <li>
                        FIXED: Portfolio Item Overlapped Links Issue on Boxed Layout
                         <ul>  
                          <li>Modified html file: <code>page_portfolio.html</code></li>
                          <li>Modified css file: <code>assets/css/pages/portfolio.css</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Basic Datatables Issue on Mobile Devices
                         <ul>  
                          <li>Modified html file: <code>table_basic.html</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Form Wizard Steps Alignment Issue On Mobile Devices
                         <ul>  
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: FullScreen Link Functionality Issue
                         <ul>  
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                </ul>
                </br>
                
                <h4>Version 1.5.1 – 17 October 2013(Both LTR and RTL versions)</h4>
                <ul>
                    <li>
                        NEW: Extended Bootstrap Modals Plugin
                         <ul>  
                          <li>Added html file: <code>ui_extended_modals.html</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-modal/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Disabled Menu Links for Sidebar Menu, Horizontal Menu & Topbar Menu
                         <ul>  
                          <li>Added html file: <code>layout_disabled_menu.html</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Google reCaptcha Integration
                         <ul>  
                          <li>Modified html file: <code>form_component.html</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: FlipScroll Responsive Datatable
                         <ul>  
                          <li>Modified html file: <code>table_responsive.html</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Scrollable Responsive Datatable
                         <ul>  
                          <li>Modified html file: <code>table_responsive.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Inline Social Icons
                         <ul>  
                          <li>Modified html file: <code>ui_buttons.html</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>                    
                    <li>
                        NEW: Added New Social Icon - Reddit
                         <ul>  
                          <li>Modified html file: <code>ui_buttons.html</code></li>
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Added "toast-top-center" & "toast-bottom-center" options for Bootstrap Toastr Notifications.
                         <ul>  
                          <li>Modified html file: <code>ui_toastr.html</code></li>
                          <li>Modified css file: <code>assets/css/plugins.css</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Added "No line" Tree View Option for Bootstrap FuelUX Tree.
                         <ul>  
                          <li>Modified html file: <code>ui_tree.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/ui_tree.js</code></li>
                          <li>Modified plugin folder: <code>assets/plugins/fuelux/</code></li>
                        </ul>
                    </li>
                     <li>
                        FIXED: Dashboard Stat Blocks Issue On Window Resize.
                         <ul>  
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Portfolio Item Issue When Window Resized on Firefox.
                         <ul>  
                          <li>Modified html page: <code>page_portfolio.html</code></li>
                          <li>Updated plugin folder: <code>assets/plugins/jquery-mixitup/</code></li>
                        </ul>
                    </li>
                     <li>
                        FIXED: Bootstrap FuelUX Input Spinner Step Issue.
                         <ul>  
                          <li>Modified javascript file: <code>assets/css/form_component.js</code></li>
                        </ul>
                    </li>
                     <li>
                        FIXED: Checkbox & Radio Outline Issue on Opera.
                         <ul>  
                          <li>Modified css file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                     <li>
                        FIXED: Editable Tables Input Width Issue.
                         <ul>  
                          <li>Modified javascript file: <code>assets/scripts/table_editable.js</code></li>
                        </ul>
                    </li>
                     <li>
                        FIXED: Change jquery-ui-1.10.1.custom.min.js to jquery-ui-1.10.3.custom.min.js on all pages
                         <ul>  
                          <li>Modified html file: <code>all occured pages</code></li>
                        </ul>
                    </li>
                </ul>

                <br>

                <h4>Version 1.5 – 7 October 2013(Both LTR and RTL versions)</h4>
                <ul>
                    <li>
                        NEW: Bootstrap 3.0 Support
                         <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Modified css files: <code>all css files</code></li>
                          <li>Modified js files: <code>all js files</code></li>
                          <li>Added js files(to support BS2 autocomplete feature since it was dropped in BS3): 
                          <code>assets/plugins/bootstrap/js/bootstrap2-typeahead.min.js</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Portfolio Page using jQuery Mixitup Plugin
                         <ul>  
                          <li>Added html file: <code>page_portfolio.html</code></li>
                          <li>Added css file: <code>assets/css/pages/portfolio.css</code></li>
                          <li>Added js files: <code>assets/scripts/portfolio.js</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Bootstrap Toastr Notifications
                         <ul>  
                          <li>Added html file: <code>ui_toastr.html</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-toastr/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Bootstrap FuelUX Tree View
                         <ul>  
                          <li>Added html file: <code>ui_tree.html</code></li>
                          <li>Added js file: <code>ui_tree.js</code></li>
                          <li>Added plugin folder: <code>assets/plugins/fuelux/</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: Bootstrap FuelUX Form Input Spinners
                         <ul>  
                          <li>Added html file: <code>form_component.html</code></li>
                          <li>Modified js file: <code>form_component.js</code></li>
                          <li>Added plugin folder: <code>assets/plugins/fuelux/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: IonRange Sliders
                         <ul>  
                          <li>Added html file: <code>ui_ion_sliders.html</code></li>
                          <li>Added plugin folder: <code>assets/plugins/ion.rangeslider/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: NoUI Range Sliders
                         <ul>  
                          <li>Added html file: <code>ui_noui_sliders.html</code></li>
                          <li>Added plugin folder: <code>assets/plugins/nouislider/</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest jQuery 1.10.2
                         <ul>  
                          <li>Updated file: <code>assets/plugins/jquery-1.10.2.min.js</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest Bootstrap Colorpicker
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/bootstrap-colorpicker</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest Bootstrap Datepicker
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/bootstrap-datepicker</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest Bootstrap Datepicker
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/bootstrap-datepicker</code></li>
                        </ul>
                    </li> 
                    <li>
                        UPGRADE: Latest Bootstrap Daterangepicker v1.2
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/bootstrap-daterangepicker</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest Bootstrap Datetimepicker
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/bootstrap-datetimepicker</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest Bootstrap X-Editable v1.4.6(Bootstrap 3.0 support implemented by KeenThemes)
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/bootstrap-editable</code></li>
                        </ul>
                    </li> 
                    <li>
                        UPGRADE: Latest Bootstrap Switch v1.8
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/bootstrap-switch</code></li>
                        </ul>
                    </li> 
                    <li>
                        UPGRADE: Latest Bootstrap Timepicker
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/bootstrap-timepicker</code></li>
                        </ul>
                    </li> 
                    <li>
                        UPGRADE: Latest Bootstrap Wizard
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/bootstrap-wizard</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest Clockface Timepicker v1.0.0
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/clockface</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest Dropzone Plugin
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/dropzone</code></li>
                        </ul>
                    </li> 
                    <li>
                        UPGRADE: Latest Font Awesome 3.2.1
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/font-awesome</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest jQuery File Upload v5.32.3
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/jquery-file-upload</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Latest jQuery MultiSelect v0.9.8
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/jquery-multi-select</code></li>
                        </ul>
                    </li> 
                     <li>
                        UPGRADE: Latest jQuery Slimscroll v1.3.1
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/jquery-slimscroll</code></li>
                        </ul>
                    </li> 
                    <li>
                        UPGRADE: Latest Select2 v3.4.3
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/select2</code></li>
                        </ul>
                    </li> 
                    <li>
                        ENHANCEMENT: Global Code Enhancement with Bootstrap 3.0 Support
                         <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Modified css file: <code>all css files</code></li>
                          <li>Modified javascript file: <code>all js files</code></li>
                        </ul>
                    </li>
                     <li>
                        DROPPED: jQueryUI Datepicker
                         <ul>  
                          <li>Use Bootstrap Datepicker as a replacement</li>
                        </ul>
                    </li> 
                    <li>
                        DROPPED: jQueryUI Dialogs
                         <ul>  
                          <li>Use Bootstrap Modal or Bootstrap Toastr Notifications as a replacement</li>
                        </ul>
                    </li>
                    <li>
                        DROPPED: jQuery Chosen
                         <ul>  
                          <li>Use Select2 as a replacement</li>
                        </ul>
                    </li> 
                </ul>

                <br>

                <h4>Version 1.4 – 29 June 2013(Both LTR and RTL versions)</h4>
                <ul>
                    <li>
                        NEW: Added Recent Activities Portlet in the Dashboard
                         <ul>  
                          <li>Modified html file: <code>index.html</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Added Todo/Tasks Portlet in the Dashboard
                         <ul>  
                          <li>Modified html file: <code>index.html</code></li>
                          <li>Added style file: <code>assets/css/pages/tasks.html</code></li>
                          <li>Added javascript file: <code>assets/scripts/tasks.js</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Bootstrap X-editable Plugin Integration
                         <ul>  
                          <li>Added html file: <code>form_editable.html</code></li>
                          <li>Added javascript file: <code>assets/scripts/form-editable.js</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-editable/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Image Crop Plugin Integration
                         <ul>  
                          <li>Added html file: <code>form_image_crop.html</code></li>
                          <li>Added javascript file: <code>assets/scripts/form-image-crop.js</code></li>
                          <li>Added plugin folder: <code>assets/plugins/jcrop/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Bootstrap Switch Plugin Integration
                         <ul>  
                          <li>Added html file: <code>form_components.html</code></li>
                          <li>Added javascript file: <code>assets/scripts/form-components.js</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-switch/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Language Switching Bar
                         <ul>  
                          <li>Added html file: <code>layout_language_bar.html</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Added Samples For Ajax Username Availability Checking
                         <ul>  
                          <li>Modified html file: <code>form_components.html</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form-components.js</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Added Samples For Password Strength Checking
                         <ul>  
                          <li>Modified html file: <code>form_components.html</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form-components.js</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Added Loading Indicator(Spinner) In Form Inputs
                         <ul>  
                          <li>Modified html file: <code>form_components.html</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Hoverable Dropdown Plugin Integration
                         <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-hover-dropdown/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Added Notification Badges for Sidebar Menu, Top Bar User Menu and Bootsrap Dropdowns
                         <ul>  
                          <li>Modified html file: <code>all html files</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Added Full Screen Mode Toggle Link Under The User Top Menu
                         <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: The Sidebar Menu's Submenu Auto Scroll/Focus on Expand
                         <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Scrollable Top Bar Notifications(Inbox, Notifications, Tasks)
                         <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Add Address Fields in Registration Form(Address, City, Country)
                         <ul>  
                          <li>Modified html files: <code>login.html</code> <code>login-soft.html</code></li>
                          <li>Modified style files: <code>assets/css/pages/login.css</code> <code>assets/css/pages/login-soft.css</code> </li>
                          <li>Modified javascript files: <code>assets/scripts/login.js</code> <code>assets/scripts/login-soft.js</code> </li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Change Non-Responsive Boxed Page Layout Width to 1000px 
                         <ul>  
                          <li>Modified style file: <code>assets/css/style-non-responsive.css</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Added Form Validation Samples for WYSIHTML5 Editor and CKEditor
                         <ul>  
                          <li>Modified html file: <code>form_validation.html</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form-validation.js</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Enabled Login Form Submit Based on Form's action attribute
                        <ul>  
                          <li>Modified html files: <code>login.html</code> <code>login-soft.html</code></li>
                          <li>Modified javascript files: <code>assets/scripts/login.js</code> <code>assets/scripts/login-soft.js</code> </li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Added Samples For Toolbar Containing of Buttons & Button Dropdowns 
                        <ul>  
                          <li>Modified html file: <code>ui_buttons.html</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Added Samples For Popovers & Tooltips in Slim Scroll Container
                        <ul>  
                          <li>Modified html file: <code>ui-general.html</code></li>
                        </ul>
                    </li>

                    <li>
                        ENHANCEMENT: Modal Dialogs with Slim Scroll Content 
                        <ul>  
                          <li>Modified html file: <code>ui_modals.html</code></li>
                        </ul>
                    </li>

                    <li>
                        UPGRADE: Bootstrap 2.3.2
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/bootstrap/</code></li>
                        </ul>
                    </li>
                    <li>
                        UPGRADE: Select2 3.4.1
                         <ul>  
                          <li>Updated folder: <code>assets/plugins/select2/</code></li>
                        </ul>
                    </li>
                     <li>
                        FIXED: Missing Images For DataTabeles Column Order Disabled State 
                         <ul>  
                          <li>Added image files: <code>assets/data-tables/images/sort_asc_disabled.png</code> <code>assets/data-tables/images/sort_desc_disabled.png</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Uniform Checkbox & Radio Button Disabled State Bug 
                         <ul>  
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Updated image file: <code>assets/plugins/uniform/images/sprite.png</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Slim Scroll Container's Height Issue(content is fully expanded before Slim Scroller initialization)
                         <ul>  
                          <li>Modified html file: <code>index.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Nested Portlets Issue
                         <ul>  
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Page Breadcrumb Overlapping Issue on IE8
                         <ul>  
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Inbox Ajax Load Issue On Chrome(412 error)
                         <ul>  
                          <li>Modified javascript file: <code>assets/scripts/inbox.js</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Select2 Z-Index Issue on Modals
                         <ul>  
                          <li>Modified style file: <code>assets/plugins/select2/select2_metro.css</code></li>
                          <li>Modified style file: <code>assets/css/style-metro.css</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: Fix Form Input Height on Mobile Devices 
                         <ul>  
                          <li>Modified style file: <code>assets/css/style-metro.css</code></li>
                        </ul>
                    </li>
                </ul>

                <br>

                <h4>Version 1.3 – 14 June 2013(Both LTR and RTL versions)</h4>
                <ul>
                    <li>
                        NEW: Layout Options(Boxed Layout, Non-Responsive Boxed Layout, Fixed Footer, Fixed Sidebar)
                         <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified style file: <code>assets/css/style-responsive.css</code></li>
                          <li>Added style file:   <code>assets/css/style-non-responsive.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Switching Back to LTR from RTL Version(Multi lingual RTL & LTR Support)
                         <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Modified style files: <code>all css files under assets/css/*</code></li>
                          <li>Modified javascript files: <code>all javascript files under assets/scripts/*</code></li>
                          <li>Modified plugin files: <code>all plugins files & folders under assets/plugins/*</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Added Complete Grey Theme Color
                        <ul>  
                          <li>Modified html files: <code>all html files</code></li>
                          <li>Added style files: <code>assets/css/themes/grey.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: jQuery Multi Select
                        <ul>  
                          <li>Modified html files: <code>form_comonents.html</code></li>
                          <li>Modified style file: <code>aassets/css/style.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form-components.js</code></li>
                          <li>Added plugin folder: <code>assets/plugins/jquery-multi-select/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Bootstrap Extended Modals
                        <ul>  
                          <li>Modified html files: <code>ui_modals.html</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified style file: <code>assets/css/style-metro.css</code></li>
                          <li>Added javascript file: <code>assets/scripts/ui-modals.js</code></li>
                          <li>Added plugin folder: <code>assets/plugins/bootstrap-modal/</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Timeline Page
                        <ul>  
                          <li>Added html file: <code>page_timeline.html</code></li>
                          <li>Added css file: <code>assets/css/pages/timeline.css</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: New Login Form Option
                        <ul>  
                          <li>Added html file: <code>login_soft.html</code></li>
                          <li>Modified style file: <code>assets/css/pages/login-soft.css</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: Advanced Data Table Samples(Responsive Datatable with Expandable Row Details & Datatable with Show/Hide Column Options)
                        <ul>  
                          <li>Added html file: <code>table_advanced.html</code></li>
                          <li>Added javascript file: <code>assets/scripts/table-advanced.js</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: 404 Error Page Option #1
                        <ul>  
                          <li>Added html file: <code>extra_404_option1.html</code></li>
                          <li>Modified style file: <code>assets/css/pages/error.css</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: 404 Error Page Option #2
                        <ul>  
                          <li>Added html file: <code>extra_404_option2.html</code></li>
                          <li>Modified style file: <code>assets/css/pages/error.css</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: 404 Error Page Option #3
                        <ul>  
                          <li>Added html file: <code>extra_404_option3.html</code></li>
                          <li>Modified style file: <code>assets/css/pages/error.css</code></li>
                          <li>Added image: <code>assets/img/pages/earth.jpg</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: 500 Error Page Option #1
                        <ul>  
                          <li>Added html file: <code>extra_500_option1.html</code></li>
                          <li>Modified style file: <code>assets/css/pages/error.css</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: 500 Error Page Option #2
                        <ul>  
                          <li>Added html file: <code>extra_500_option2.html</code></li>
                          <li>Modified style file: <code>assets/css/pages/error.css</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: More Plot Pie Chart Samples
                        <ul>  
                          <li>Added html file: <code>charts.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/charts.js</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: jQuery Migrate v1.2.1 Plugin(used with jQuery 1.10.1 for the backward compatability)
                        <ul>  
                          <li>Added javascript file: <code>assets/plugins/jquery-migrate-1.2.1.min.js</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: Added Instagram & VK Social Icons
                        <ul>  
                          <li>Modifed style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                     <li>
                        ENHANCEMENT: Improved Footer, Header & Sidebar Menu
                        <ul>  
                          <li>Modified html file: <code>all html files</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified style file: <code>assets/css/style-responsive.css</code></li>
                        </ul>
                    </li>
                     <li>
                        ENHANCEMENT: Scrollable Accordions(auto focus accordion content on click)
                        <ul>  
                          <li>Modified html file: <code>ui_tabs_accordions.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                     <li>
                        ENHANCEMENT: Flexible Left & Right Aligned Tabs with Auto Handled Min Height Tab Content(now it works fine when tab has less content)
                        <ul>  
                          <li>Modified html file: <code>ui_tabs_accordions.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                     <li>
                        ENHANCEMENT: Activate Tab by URL parameter(e.g: page.html#tab_1)
                        <ul>  
                          <li>Modified html file: <code>ui_tabs_accordions.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                     <li>
                        ENHANCEMENT: Activate Accordion by URL parameter(e.g: page.html#section_1)
                        <ul>  
                          <li>Modified html file: <code>ui_tabs_accordions.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                     <li>
                        ENHANCEMENT: Scrollable Accordions(auto focus accordion content on click)
                        <ul>  
                          <li>Modified html file: <code>ui_tabs_accordions.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Dropdown Option with Multi Select Checkbox List
                        <ul>  
                          <li>Modified html file: <code>ui_buttons.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>                   
                     <li>
                        ENHANCEMENT: Form Validation in Form Wizard Steps
                        <ul>  
                          <li>Modified html file: <code>form_wizard.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form-wizard.js</code></li>
                        </ul>
                    </li>
                    <li>
                        ENHANCEMENT: Validating Select2 Dropdowns
                        <ul>  
                          <li>Modified html file: <code>form_validation.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form_validation.js</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                      <li>
                        ENHANCEMENT: Select2 Dropdown UI
                        <ul>  
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified style file: <code>assets/plugins/select2/select2_metro.css</code></li>
                        </ul>
                    </li>
                    <li>
                        UPDATES: Plugin & Resource Updates(Requires replacing files and folders entirely)
                        <ul>  
                          <li>
                            Latest jQuery v1.10.1 <code>assets/plugins/jquery-1.10.1.min.js</code>
                          </li>
                          <li>
                            Latest FontAwesome v3.2.0 <code>assets/plugins/font-awesome/</code>
                          </li>
                          <li>
                            Latest Bootstrap Datepicker <code>assets/plugins/bootstrap-datepicker/</code>
                          </li>
                          <li>
                            Latest Bootstrap WYSIHTML5 <code>assets/plugins/bootstrap-wysihtml5/</code>
                          </li>
                          <li> 
                            Latest jQuery Datatables v1.9.4 <code>assets/plugins/data-tables/</code>
                          </li>
                          <li> 
                            Latest Dropzone v3.0 <code>assets/plugins/dropzone/</code>
                          </li>
                          <li>
                            Latest jQuery Flot Charts v0.8.1 <code>assets/plugins/flot/</code>
                          </li>
                          <li>
                            Latest jQuery GMaps v0.4.3 <code>assets/plugins/gmaps/</code>
                          </li>
                          <li>
                            Latest jQuery SlimScroll <code>assets/plugins/jquery-slimscroll/</code>
                          </li>
                           <li>
                            Latest jQuery Validation v1.11.1 <code>assets/plugins/jquery-validation/</code>
                          </li>
                          <li>
                            Latest jQuery Uniform v2.1.0 <code>assets/plugins/uniform/</code>
                          </li>
                          <li>
                            Latest jQuery BlockUI v2.59.0 <code>assets/plugins/jquery.blockui.min.js</code>
                          </li>
                          <li>
                            Latest jQuery Cookie v1.3.1 <code>assets/plugins/jquery.cookie.min.js</code>
                          </li>
                        </ul>
                    </li>
                    <li>
                        FIX: Error On Using Multiple WYSIHTML5 Instances 
                        <ul>  
                          <li>Modified html file: <code>form_component.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form-component.js</code></li>
                          <li>Modified plugin files(requires replacing entire folder): <code>assets/plugins/bootstrap-wysihtml5/</code></li>
                        </ul>
                    </li>
                     <li>
                        FIX: Plot Pie Chart Hover Issue
                        <ul>  
                          <li>Modified html file: <code>charts.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/charts.js</code></li>
                        </ul>
                    </li>
                     <li>
                        FIX: Z-Index Issue When Datepickers, Datetimepicker, Timepicker and Colorpickers used in Modals
                        <ul>  
                          <li>Modified html file: <code>form_component.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form-component.js</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                     <li>
                        FIX: Placeholder Issue on Internet Explorer 8 & 9.
                        <ul>  
                          <li>Modified javascript file: <code>assets/scripts/app.js</code></li>
                        </ul>
                    </li>
                    <li>
                        RETIRED: BREAKPOINTS Plugin Not In Use Anymore
                        <ul>  
                          <li>Modified html file: <code>all html files</code></li>
                          <li>Modified javascript file(implemented a function to handle the layout on window resize event): <code>assets/scripts/app.js</code></li>
                          <li>Plugin folder: <code>assets/plugins/breakpoints/</code></li>
                        </ul>
                    </li>
                </ul>

                <br>

                <h4>Version 1.2.4 – 11 May 2013(Both LTR and RTL versions)</h4>
                <ul>
                    <li>
                        NEW: Integrated jQuery UI Dialogs:
                         <ul>  
                          <li>Modified html file: <code>ui_jqueryui.html</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/ui-jqueryui.js</code></li>
                        </ul>
                    </li>
                    <li>
                        NEW: Integrated Bootstrap Datatimepicker:
                         <ul>  
                          <li>Bootstrap Datatimepicker plugin added: <code>assets/plugins/bootstrap-datatimepicker/</code></li>
                          <li>Modified html file: <code>form_component.html</code></li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/form-components.js</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: Dynamic Pagination - jQuery Bootpad:
                         <ul>  
                          <li>jQuery Bootpad plugin added: <code>assets/plugins/jquery.bootpag.min,js</code></li>
                          <li>Modified html file: <code>ui_general.html</code></li>
                          <li>Modified javascript file: <code>assets/scripts/ui-general.js</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: Cooming Soon Page:
                         <ul>  
                          <li>Added html file: <code>page_coming_soon.html</code></li>
                          <li>Added style file: <code>assets/css/pages/coming-soon.css</code></li>
                          <li>Added javascript file: <code>assets/scripts/coming-soon.js</code></li>
                          <li>jQuery Countdown plugin added: <code>assets/plugins/countdown/</code></li>
                          <li>jQuery Backstretch plugin added: <code>assets/plugins/backstretch/</code></li>
                          <li>Background images added: <code>assets/img/bg/</code></li>
                        </ul>
                    </li>
                     <li>
                        NEW: Lock Screen:
                         <ul>  
                          <li>Added html file: <code>extra_lock.html</code></li>
                          <li>Added style file: <code>assets/css/pages/lock.css</code></li>
                          <li>Added javascript file: <code>assets/scripts/lock.js</code></li>
                          <li>jQuery Backstretch plugin added: <code>assets/plugins/backstretch/</code></li>
                          <li>Background images added: <code>assets/img/bg/</code></li>
                        </ul>
                    </li>
                    <li>
                        IMPROVEMENT: Select2 Dropdowns Integration with Advance Form Layouts:
                         <ul>  
                          <li>Please use Select2 instead of Chosen since Select2 works very well with bootstrap in responsive layouts</li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified html page: <code>form_samples.html</code></li>
                        </ul>
                    </li>
                    <li>
                        IMPROVEMENT: Bootstrap Datepicker UI:
                         <ul>  
                          <li>The datepicker UI modified to give more Metro style</li>
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified plugin javascript file: <code>assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js
                          </code></li>
                        </ul>
                    </li>
                     <li>
                        IMPROVEMENT: FullCalendar Colorful Events:
                         <ul>  
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                          <li>Modified javascript file: <code>assets/scripts/index.js</code></li>
                          <li>Modified javascript file: <code>assets/scripts/calendar.js</code></li>
                        </ul>
                    </li>
                    <li>
                        FIXED: FancyBox Image Preview Overlapped by the Fixed Footer:
                         <ul>  
                          <li>Modified style file: <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                     <li>
                        FIXED: Select2 diselect icon position issue for RTL version:
                         <ul>  
                          <li>Modified style file: <code>assets/plugins/select2/select2_metro.css</code></li>
                        </ul>
                    </li>
                      <li>
                        FIXED: Info block alignment in RTL Version -> Extra -> Search Results -> Booking Search:
                         <ul>  
                          <li>Modified style file: <code>assets/extra_search.html</code></li>
                        </ul>
                    </li>
                </ul>

                <br>

                <h4>Version 1.2.3 – 3 May 2013</h4>
                <ul>
                    <li>
                        NEW: Full RTL(Right To Left) Support:
                         <ul>  
                          <li>Created a new folder <code>template_content_rtl</code> for RTL version</li>
                          <li>The theme layout, all the html templates and the plugins converted to RTL version</li>
                        </ul>
                    </li>
                    <li>
                        NEW: Loading Page Content via Ajax:
                        <ul>  
                          <li>Added a new sample page: <code>layout_ajax.html</code></li>
                          <li>Added loading image for ajax content loading process bar: <code>assets/img/ajax-loading.gif</code></li>
                          <li>Modified the main script file: <code>assets/scripts/app.js</code>
                        </ul>
                    </li>
                    <li>
                        NEW: Responsive Data Tables:
                        <ul>  
                          <li>Added a new sample page: <code>table_responsive.html</code></li>
                          <li>Modified the main css file: <code>assets/css/style.css</code>
                        </ul>
                    </li>
                    <li>
                        NEW: About Us Page
                        <ul>  
                          <li>Added a new sample page: <code>page_about.html</code></li>
                          <li>Added a new css file: <code>assets/css/pages/about-us.css</code>
                        </ul>
                    </li>
                    <li>
                        NEW: Contact Us Page
                        <ul>  
                          <li>Added a new sample page: <code>page_contact.html</code></li>
                          <li>Added a new javascript file: <code>assets/scripts/contact-us.js</code>
                        </ul>
                    </li>             
                    <li>
                        NEW: Enhanced Bootstrap Datapicker from 
                        <ul>  
                          <li>Current Bootstrap Datepicker plugin replaced with a better one from
                            <a href="https://github.com/eternicode/bootstrap-datepicker"></a></li>
                          <li>The plugin assets<code>assets/plugins/bootstrap-datepicker</code> and demo samples are not modified since this new plugins is fully compatible enhanced version of the previouse one.</li>
                        </ul>
                    </li>
                    <li>FIXED: Broken Portlet Header Issue on Webkit Browsers
                      <ul>  
                          <li>Modified portlet HTML mackup and the main css file <code>assets/css/style.css</code></li>
                        </ul>
                    </li>
                    
                </ul>
                 <br>
                <h4>Version 1.2.2 – 22 April 2013</h4>
                <ul>
                    <li>NEW: Combined Horizontal & Sidebar Menu Layout</li>
                    <li>NEW: Promo Page Layout</li>
                    <li>NEW: Sidebar Closed Page Layout</li>
                    <li>NEW: Blog Page</li>
                    <li>NEW: News Page</li>                          
                    <li>NEW: Integrated jQuery UI Datepicker</li>
                    <li>NEW: Social Icons</li>
                    <li>FIXED: Some minor bug fixing</li>
                </ul>
                 <br>
                <h4>Version 1.2.1 – 13 April 2013</h4>
                <ul>
                    <li>NEW: Easy Pie Charts in Dashboard</li>
                    <li>NEW: Sparklines Charts in Dashboard</li>
                    <li>NEW: Form Input Masks</li>
                    <li>NEW: Ip Address Input Control</li>
                    <li>NEW: Search Page Options(Image Search, Booking Search)</li>
                    <li>NEW: Pricing Table Option</li>
                    <li>FIXED: Some minor bug fixing</li>
                </ul>
                 <br>
                <h4>Version 1.2 – 10 April 2013</h4>
                <ul>
                    <li>NEW: Email Templates(email1.html, email2.html, email3.html, email4.html, email5.html, email6.html)</li>
                    <li>NEW: Multi Level Horizontal Menu(horizontal_menu1.html, horizontal_menu2.html,)</li>
                    <li>NEW: 4 Level Sidebar Menu(index.html)</li>
                    <li>NEW: Full Featured Inbox(inbox.html)</li>
                    <li>NEW: Integrated jQuery Select2(form_component.html)</li>
                    <li>NEW: Country List with Flags(form_component.html)</li>
                    <li>NEW: Printable Invoice(extra_invoice.html)</li>
                    <li>UPGRADE: Latest jQuery FullCalendar v1.6.0 Integration(calendar.html)</li>
                    <li>IMPROVEMENT: Sidebar Main Menu Code Optimization</li>
                    <li>IMPROVEMENT: Javascript Optimization(Core and demo functionalities put in seperated files)</li>
                    <li>IMPROVEMENT: CSS Optimization(Core and page level styles put in seperated files)</li>
                    <li>IMPROVEMENT: Assets File Structure Optimized(resources and plugins categorized in seperate folders)</li>
                    <li>FIXED: Some minor bug fixing</li>
                </ul>
                 <br>
                <h4>Version 1.1.2 – 17 March 2013</h4>
                <ul>
                    <li>NEW: Advance Form Samples(form_samples.html)</li>
                    <li>NEW: Advance Form Validation(form_validation.html)</li>
                    <li>NEW: Integrated Tree Views(ui_tree.html)</li>
                    <li>NEW: Integrated Nestable Lists(ui_nestable.html)</li>
                    <li>NEW: Touch Support For Sliders(ui_sliders.html)</li>
                    <li>IMPROVEMENT: Some code improvements</li>                               
                    <li>FIXED: Some minor bug fixing</li>
                </ul>
                <br>
                <h4>Version 1.1.1 – 10 March 2013</h4>
                <ul>
                    <li>NEW: Integrated jQuery UI Sliders(ui_sliders.html)</li>
                    <li>NEW: jQuery Knob - Circle Dials(ui_sliders.html)</li>
                    <li>NEW: Windows 8 Style Tiles(ui_tiles.html)</li>
                    <li>NEW: Integrate Multiple File Upload(form_fileupload.html)</li>
                    <li>NEW: Integrated Dropzone File Upload(form_dropzone.html)</li>
                    <li>NEW: Inline Editable Data Tables(table_editable.html)</li>
                    <li>NEW: Full Width Page Layout(extra_full_width.html)</li>  
                    <li>NEW: Draggable Portlets Moved To a Seperate Page(portlet_draggable.html)</li> 
                    <li>UPGRADE: Twitter Bootstrap v2.3.2</li>   
                    <li>IMPROVEMENT: Some code improvements</li>                               
                    <li>FIXED: Some minor bug fixing</li>
                </ul>
                <br>
                 <h4>Version 1.1 – 26 February 2013</h4>
                <ul>
                    <li>NEW: GLYPHICONS PRO package(Value $59)</li>
                    <li>NEW: Show/hide sidebar</li>
                    <li>NEW: Dragable portlets</li>
                    <li>NEW: Buttons/dropdowns/pagination in portlet headers</li>
                    <li>NEW: Styled accordions</li>
                    <li>NEW: User profile page</li>
                    <li>NEW: FAQ rage</li>
                    <li>NEW: Search results page</li>
                    <li>NEW: Invoice rage</li>
                    <li>NEW: Bordered form Layout</li>
                    <li>NEW: 2 new heme colors</li>
                    <li>FIXED: Some minor bug fixing</li>
                    <li>IMPROVEMENT: Some code improvements</li>
                </ul>
                <br>
                <h4>Version 1.0 – 13 February 2013</h4>
                <ul>
                    <li>Initial release</li>
                </ul>
              </section> 
          </div>  
        </div>    

         <div class="row">
          <div class="span12">
              <section id="upgrade">
              <div class="page-header">
                <h1>14. Upgrade</h1>
                 <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
              </div>
              <h4>Upgrade From v1.5.x To v2.x</h4>              
              <p>
                Just replace the assets folder with the latest one(merge back your own changes if you have done any) and update html codes of header, footer & sidebar.
              </p>
              <h4>Upgrade From v1.4.x To v2.x</h4>              
              <p>
                Since v1.5.x came with Bootstrap 3.0 support, we have changed and edited the entire theme and updated most of the 3rd party plugins and resources. 
                The best practice for 2.x to 3.0 migration will be, to update your page header, top bar menu, sidebar menu and footer part first. Then proceed with content and UI components.
              </p> 
              <p>
                 <h3>Major Metronic Class Changes</h3>
                <table class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Older Versions</th>
                    <th>Metronic 1.5</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><code>.m-wrap</code></td>
                    <td><code>.form-control</code></td>
                  </tr>
                  <tr>
                    <td><code>.btn</code></td>
                    <td><code>.btn .default</code></td>
                  </tr>
                  <tr>
                    <td><code>.xsmall</code></td>
                    <td><code>.input-xsmall</code></td>
                  </tr>
                  <tr>
                    <td><code>.small</code></td>
                    <td><code>.input-small</code></td>
                  </tr>
                  <tr>
                    <td><code>.medium</code></td>
                    <td><code>.input-medium</code></td>
                  </tr>
                  <tr>
                    <td><code>.large</code></td>
                    <td><code>.input-large</code></td>
                  </tr>
                </tbody>
                </table>

                <h3>Major Bootstrap Class Changes</h3>
                <table class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>Bootstrap 2.x</th>
                    <th>Bootstrap 3.0</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><code>.container-fluid</code></td>
                    <td><code>.container</code></td>
                  </tr>
                  <tr>
                    <td><code>.row-fluid</code></td>
                    <td><code>.row</code></td>
                  </tr>
                  <tr>
                    <td><code>.span*</code></td>
                    <td><code>.col-md-*</code></td>
                  </tr>
                  <tr>
                    <td><code>.offset*</code></td>
                    <td><code>.col-md-offset-*</code></td>
                  </tr>
                  <tr>
                    <td><code>.brand</code></td>
                    <td><code>.navbar-brand</code></td>
                  </tr>
                  <tr>
                    <td><code>.nav-collapse</code></td>
                    <td><code>.navbar-collapse</code></td>
                  </tr>
                  <tr>
                    <td><code>.nav-toggle</code></td>
                    <td><code>.navbar-toggle</code></td>
                  </tr>
                  <tr>
                    <td><code>.btn-navbar</code></td>
                    <td><code>.navbar-btn</code></td>
                  </tr>
                  <tr>
                    <td><code>.hero-unit</code></td>
                    <td><code>.jumbotron</code></td>
                  </tr>
                  <tr>
                    <td><code>.icon-*</code></td>
                    <td><code>.glyphicon .glyphicon-*</code></td>
                  </tr>
                  <tr>
                    <td><code>.btn</code></td>
                    <td><code>.btn .btn-default</code></td>
                  </tr>
                  <tr>
                    <td><code>.btn-mini</code></td>
                    <td><code>.btn-xs</code></td>
                  </tr>
                  <tr>
                    <td><code>.btn-small</code></td>
                    <td><code>.btn-sm</code></td>
                  </tr>
                  <tr>
                    <td><code>.btn-large</code></td>
                    <td><code>.btn-lg</code></td>
                  </tr>
                  <tr>
                    <td><code>.visible-phone</code></td>
                    <td><code>.visible-sm</code></td>
                  </tr>
                  <tr>
                    <td><code>.visible-tablet</code></td>
                    <td><code>.visible-md</code></td>
                  </tr>
                  <tr>
                    <td><code>.visible-desktop</code></td>
                    <td><code>.visible-lg</code></td>
                  </tr>
                  <tr>
                    <td><code>.hidden-phone</code></td>
                    <td><code>.hidden-sm</code></td>
                  </tr>
                  <tr>
                    <td><code>.hidden-tablet</code></td>
                    <td><code>.hidden-md</code></td>
                  </tr>
                  <tr>
                    <td><code>.hidden-desktop</code></td>
                    <td><code>.hidden-lg</code></td>
                  </tr>
                  <tr>
                    <td><code>.input-small</code></td>
                    <td><code>.input-sm</code></td>
                  </tr>
                  <tr>
                    <td><code>.input-large</code></td>
                    <td><code>.input-lg</code></td>
                  </tr>
                  <tr>
                    <td><code>.checkbox.inline</code> <code>.radio.inline</code></td>
                    <td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
                  </tr>
                  <tr>
                    <td><code>.input-prepend</code> <code>.input-append</code></td>
                    <td><code>.input-group</code></td>
                  </tr>
                  <tr>
                    <td><code>.add-on</code></td>
                    <td><code>.input-group-addon</code></td>
                  </tr>
                  <tr>
                    <td><code>.thumbnail</code></td>
                    <td><code>.img-thumbnail</code></td>
                  </tr>
                  <tr>
                    <td><code>ul.unstyled</code></td>
                    <td><code>.list-unstyled</code></td>
                  </tr>
                  <tr>
                    <td><code>ul.inline</code></td>
                    <td><code>.list-inline</code></td>
                  </tr>
                </tbody>
              </table>
               </p>
              <p>
                              Please check out <a href="http://getbootstrap.com/getting-started/#migration">http://getbootstrap.com/getting-started/#migration</a> to learn more about Bootstrap 2.x to 3.0 migration.
              </p>
              <p>
                 Please do not forget to backup your files before the upgrade. If you encountered any problem during the upgrade please contact our support at <a href="mailto:support@keenthemes.com">support@keenthemes.com</a>
              </p>
              </section> 
          </div>  
        </div>  

        <div class="row">
          <div class="span12">
              <section id="end">
              <div class="page-header">
                <h1>14. End Of Documentation</h1>
                 <a href="javascript:;">To top <i class="icon-arrow-up"></i></a>
              </div>
              <p>
                Once again, thanks for purchasing Metronic. We hope you will enjoy using it for your next project.
              </p> 
              </section> 
          </div>  
        </div>    

    </div>
    <!-- END -->
    <footer class="footer">
      <div class="container container-narrow">
        <p>Metronic - Admin Dashboard Template. Designed and built with love by <a href="http://www.keenthemes.com" target="_blank">keenthemes</a> 
      </div>
    </footer>

    <!-- Le javascript
      ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery-1.8.3.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>
  </body>
</html>